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内 容 简 介 


本 书 是 《电子 商务 网 站 建设 教程 (第 2 版 ) 的 配套 实验 教材 , 共 包 括 15 个 实验 。 实验 1 至 实验 7 是 
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还 增设 了 系统 功能 与 组 成 数据库 设 计 两 个 栏目 。 本 书 的 配套 光盘 中 包含 《电子 商务 网 站 建设 教程 )( 第 
2 版 ) 的 实例 及 本 书 实验 所 用 到 的 实验 素材 和 结果 。 
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出 版 说 明 


等 学 校 计 算 机 基础 教育 教材 精 选 


时 


在 教育 部 关于 高 等 学 校 计算 机 基础 教育 三 层次 方案 的 指导 下 .我国 高 等 学 校 的 计算 
机 基础 教育 事业 荐 勃发 展 。 经 过 多 年 的 教学 改革 与 实践 ,全 国 很 多 学 校 在 计算 机 基础 教 
育 这 一 领域 中 积累 了 大 量 宝贵 的 经 验 , 取 得 了 许多 可 喜 的 成 果 。 

随 着 科教 兴国 战略 的 实施 以 及 社会 信息 化 进程 的 加 快 ,目前 我 国 的 高 等 教育 事业 正 
面临 着 新 的 发 展 机 遇 , 但 同时 也 面 对 新 的 挑战 .这些 都 对 高 等 学 校 的 计算 机 基础 教育 提出 
了 更 高 的 要 求 。 为 了 适应 教学 改革 的 需要 ,进一步 推动 我 国 高 等 学 校 计算 机 基础 教育 事 
业 的 发 展 ,我 们 在 全 国 各 高 等 学 校 精心 挖掘 和 壮 选 了 一 批 经 过 教学 实践 检验 的 优秀 的 教 
学 成 果 , 编 辑 出 版 了 这 套 教 材 。 教 材 的 选 题 范围 涵盖 了 计算 机 基础 教育 的 三 个 层次 : 面 
向 各 高 校 开 设 的 计算 机 必修 课 .选修 课 ,以 及 与 各 类 专业 相 结合 的 计算 机 课程 。 

为 了 保证 出 版 质量 ,同时 更 好 地 适应 教学 需求 ,本 套 教 材 将 采取 开放 的 体系 和 滚动 出 
版 的 方式 ( 即 成 熟 一 本 .出 版 一 本 .并 保持 不 断 更 新 ) .坚持 宁 缺 考 滥 的 原则 ,力求 反映 我 国 
高 等 学 校 计算 机 基础 教育 的 最 新 成 果 , 使 本 套 从 书 无 论 在 技术 质量 上 还 是 在 文字 质量 上 
均 成 为 真正 的 “ 精 选 ”。 

i dd i 
版 了 许多 优秀 的 教材 。 本 套 教材 的 出 版 将 进一步 丰富 和 扩大 我 社 在 这 一 领域 的 选 题 范 
围 、 层 次 和 深度 ,以 适应 高 校 计算 机 基础 教育 课程 层次 化 、 多 样 化 的 趋势 ， 从 而 更 好 地 满足 
各 学 校 由 于 条 件 、 师 资 和 生源 水 平 、 专 业 领 域 等 的 差异 而 产生 的 不 同 需 求 。 我 们 热切 期 望 
全 国 广 大 教师 能 够 积极 参与 到 本 套 丛 书 的 编写 工作 中 来 ,把 自己 的 教学 成 果 与 全 国 的 同 
行 们 分 享 ; 同 时 也 欢迎 广大 读者 对 本 套 教 材 提 出 宝贵 意见 ,以 便 我 们 改进 工作 ,为 读者 提 
供 更 好 的 服务 。 

我 们 的 电子 邮件 地 址 是 : jiaoh@tup. tsinghua. edu. cn. :联系 人 : 焦 虹 。 


清华 大 学 出 版 社 
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当今 社会 正 处 于 知识 经 济 时 代 , 作 为 知识 经 济 产业 支柱 的 信息 技术 使 全 球 范 围 内 的 
信息 化 逐步 成 为 现实 ,并 进一步 引起 了 产业 结构 的 变化 。 作 为 新 经 济 核心 的 电子 商务 从 
诞生 之 日 起 就 以 惊人 的 速度 发 展 着 ,影响 了 各 行 各 业 , 对 企业 的 经 营 模式 政府 管理 模式 
和 人 们 的 生活 方式 等 方面 产生 了 前 所 未 有 的 革命 性 影响 。 电 子 商 务 带 来 的 不 仅仅 是 交易 
手段 的 变化 ,更 是 经 济 结构 的 变革 。 为 了 适应 社会 变革 的 需要 ,也 为 了 配合 高 等 学 校 实行 
面向 21 世纪 的 教学 改革 ,尽快 培养 一 大 批 既 懂 专业 基础 理论 知识 ,又 有 较 强 的 计算 机 应 
用 能 力 的 高 素质 人 才 ,我 们 编写 了 《电子 商务 网 站 建设 教程 )( 第 2 版) 与 《电子 商务 网 站 建 
设 实验 指导 》 第 2 版 )。 本 书 是 4 电子 商务 网 站 建设 教程 兴 第 2 版 ) 的 配套 实验 教材 ,力求 
通过 实验 使 学 生 能 进一步 理解 网 站 建设 各 部 分 知识 点 。 

本 书 围绕 网 站 的 外 观 设计 和 Web 应 用 程序 开发 设置 实验 。 外 观 设计 部 分 共 安 排 了 
实验 1 至 实验 7 这 7 个 实验 ,内 容 涵 盖 了 网 页 设计 的 主要 知识 点 ,主要 目的 是 帮助 读者 掌 
握 和 利用 Dreamweaver 8 来 完成 网 站 静态 页 面 的 设计 。 

Web 应 用 程序 开发 部 分 共 安 排 了 8 个 实验 ,是 关于 网 站 服务 器 端 主要 知识 点 的 实 
验 , 内 容 包括 虚拟 服务 器 技术 .ASP 技术 IIS Web 服务 器 技术 .SQL Server 数据 库 技术 、 
Dreamweaver 8 的 数据 库 连 接 、 登 录 与 密码 系统 .输入 及 修改 与 查询 系统 .检索 系统 .留言 
板 等 。 为 了 使 读者 能 较 好 地 理解 和 掌握 服务 器 端 Web 应 用 的 核心 知识 ,拓宽 视野 ,实验 
中 安排 了 3 个 校园 网 选课 系统 的 实验 ,以 帮助 读者 进一步 理解 Web 应 用 技术 ,并 能 真正 
对 这 部 分 知识 融会 贯通 。 

本 套 教 材 于 2004 年 1 月 发 行 第 1 版 以 来 .受到 了 广大 读者 的 欢迎 ,先后 重印 十 多 次 ， 
并 获 2005 年 上 海 市 教学 成 果 ( 高 等 学 校 ) 三 等 奖 。 根 据 读者 的 意见 ,结合 作者 本 人 的 应 用 
实践 经 验 ,在 第 1 版 的 基础 上 对 教材 作 了 修订 。 这 次 修订 除了 对 软件 版 本 作 了 升级 以 外 ， 
还 对 第 1 版 的 教材 内 容 作 了 较 大 的 增删 和 调整 ,修订 后 的 教材 内 容 更 加 精炼 ,更 便于 读者 
学 习 和 掌握 。 

本 书 与 《电子 商务 网 站 建设 教程 )( 第 2 版 );( 简 称 “ 教 程 ”) 合 用 一 张 光 盘 。 在 配套 光盘 
中 存放 的 是 “教程 "与 本 书 实验 中 所 用 到 的 实验 素材 以 及 “教程 "的 实例 和 本 书 各 实验 操作 
的 主要 结果 , 供 读者 参考 。 


本 书 由 赵 祖 荫 主 编 。 实 验 1 至 实验 4 由 赵 祖 荫 、 张 玮 颖 编写 :实验 5、 实 验 6 由 王 瑞 
莉 编 写 ; 实 验 7 至 实验 9 由 赵 祖 荫 . 单 婷 编写 ;实验 10、 实 验 11 由 张瑜 、 孙 青 编写 ;实验 12 
至 实验 15 由 赵 祖 荫 .张瑜 . 赵 卓 群 编写 。 全 书 由 赵 祖 荫 拟 定 大 纲 和 统一 书稿 。 

由 于 作者 学 识 有 限 ,对 于 书 中 不 妥 与 错误 之 处 ,和 敬 请 读者 批评 指正 。 


作者 
2007 年 9 月 于 上 海 
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] Dreamweaver 8 入 门 及 
实验 基本 操作 的 实验 


1. 实验 的 目的 与 要 求 


(1) 掌握 Dreamweaver 8 启动 和 退出 的 方法 。 

(2) 熟悉 Dreamweaver 8 的 网 页 文档 窗口 .站 点 管理 面板 及 各 种 常用 面板 。 

(3) 掌握 本 地 站 点 的 设置 方法 和 制作 一 个 简单 网 页 的 过 程 。 

(4) 了 解 网 页 文档 代码 的 基本 格式 ,了 解 代码 编辑 的 基本 方法 。 

(5) 掌握 下 列 快捷 键 的 用 法 : Ctrl 十 N、Ctrl 十 O、Ctrl 十 S、Ctrl 十 Q、Ctrl 十 Z、Ctrl 十 Y、 
Cl F.Cult FSCti+C Cut Rut V Ct A FPF2.F4F98,.F12, 

注意 : 

在 本 实验 教材 中 所 用 的 素材 文件 都 在 配套 光盘 对 应 章节 的 素材 文件 夹 中 。 可 在 本 地 
计算 机 的 硬盘 上 新 建文 件 夹 My site, 将 配套 光盘 中 对 应 章节 的 实验 素材 内 容 复 制 到 文件 
夹 My site 中 ,并 把 该 文件 夹 设 为 本 地 站 点 。 例 如 ,本 实验 可 将 ch01 文件 夹 下 material 中 
的 全 部 文件 复制 到 My site 中 ,然后 完成 相应 操作 ,后 面 章节 的 实验 素材 也 可 用 相同 方法 
处 理 。 


2. 实验 的 操作 内 容 


1) 网 页 编辑 器 的 基本 操作 

(1) 用 不 同 的 方法 启动 和 退出 Dreamweaver 8。 

(2) 用 快捷 键 打 开 和 关闭 【 搬 和 人 了 栏 和 【属性 了 面板 。 

(3) 将 [CSS 浮动 面板 组 打开 后 . 先 移出 再 移 人 浮动 面板 放置 区 ,然后 再 将 【CSS] 浮 
动 面 板 组 中 的 【CSS 样式 了 面板 组 合 到 【文件 了 浮动 面板 组 中 。 查 看 浮动 面板 组 操作 后 的 

(4) 打开 【框架 了 面板 ,将 其 组 合 到 【 层 了 浮动 面板 组 中 。 

(5) 用 快捷 键 关闭 和 打开 浮动 面板 组 .用 鼠标 指向 折 秋 和 展开 各 个 浮动 面板 组 ,查看 
浮动 面板 组 操作 后 的 效果 。 

(6) 启动 Dreamweaver 8 后 ,将 窗口 设置 为 955X600(1024X800, 最 大 值 ); 打 开 、 关 
闭 标 尺 显示 ,设置 标尺 单位 分 别 为 厘米 英寸、 像素 :显示 和 隐藏 网 格 , 设 置 网 格 属性 共 间 
隔 了 3 为 10 像素 【显示 ] 为 线 .【 颜 色 ] 为 # CCCC99, 选 中 [ 靠 齐 到 网 格 ] 复 选 框 。 

2) 建立 网 站 的 基本 操作 


(1) 在 本 地 计算 机 的 当前 盘 中 建立 名 为 My site 的 文件 夹 ,并 将 光盘 中 本 实验 素材 复 
制 到 My site 文件 夹 中 。 然 后 打开 【管理 站 点 了 面板 ,将 该 文件 夹 设 为 本 地 站 点 。 

(2) 把 My site 中 的 img 文件 夹 设 置 为 [默认 图 像 文件 夹 〗, 设 置 【链接 相对 于 了 为 “ 文 
档 ”。 

(3) 打开 【文件 浮动 面板 ,取消 本 地 站 点 中 只 读 文 件 的 只 读 属 性 。 

3) 制作 简单 网 页 

(1) 按 下 列 要 求 制作 图 1-1 所 示 的 网 页 .并 将 网 页 以 exel-1. html 为 名 保存 在 本 地 站 
点 中 。 

Q@ 新 建 网 页 文档 ,设置 网 页 属性 : 页 面 的 背景 图 像 为 img 文件 夹 中 的 文件 bg0100. 
jpg, 背 景 图 像 为 “横向 重复 ”.【 左 边 距 】【 布 边 距 】【 上 边 距 】【 下 边 距 为 0 像素 ,网 页 标 
题 为 “欢迎 访问 电子 商务 网 站 ”。 网 页 属性 设置 完成 后 ,将 网 页 以 exel-1. html 为 名 保存 
在 本 地 站 点 My site 中 。 

@ 在 网 页 合适 的 位 置 插入 图 像 earth. gif, 并 启动 外 部 图 像 编辑 软件 在 图 像 上 添加 文 
字 “Welcome”。 

@ 在 网 页 中 输入 横 排 带 阴影 的 文字 :“Business-to-Customer” 和 “商务 网 站 欢迎 您 ”。 

@ 预览 网 页 后 ,将 网 页 以 exel-1. html 为 名 保存 在 本 地 站 点 My site 中 。 


各 无 标题 文档 Wicrosoft Internet Explorer 


文件 到 ) 编辑 于) 查看 Y) 收藏 人 工具 上 帮助 0D 


商 宛 网 BB 


Welcome 


to Gustomer 


图 1-1 网 页 应 用 练习 样张 一 


(2) 按 下 列 要 求 制作 如 图 1-2 所 示 的 网 页 .并 将 网 页 以 exel-2. html 为 名 保存 在 本 地 
站 点 中 。 

@ 新 建 网 页 文档 ,设置 网 页 属性 : 页 面 的 背景 图 像 为 img 文件 夹 中 的 文件 bg0005. 
jpg, 背 景 图像 为 “重复 ”,【 左 边 距 3】【 右 边 距 【上 边 距 3】【 下 边 距 3 为 0 像素 ,网 页 标题 为 
“ 书 ”。 网 页 属性 设置 完成 后 ,将 网 页 以 exel-2. html 为 名 保存 在 本 地 站 点 My site 中 。 

@ 在 网 页 的 第 二 行 居 中 插入 图 像 bg0012. jpg, 并 将 图 像 的 大 小 调整 为 500X40 像 


_ 
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图 1-2 网 页 应 用 练习 样张 二 


素 。 在 网 页 的 第 三 行 居 中 搬 和 图像 welcome. jpg。 

@ 在 网 页 的 第 三 行 居中 依次 插入 shu2. swf、shu. gif shu4. swf。 选 中 逐 帧 图 像 文 件 
shu. gif 后 ,启动 外 部 图 像 编 辑 软件 ,在 shu. gif 的 最 后 一 帧 居中 导入 图 像 shu. jpg。 

@ 在 网 页 的 下 方 输入 文字 “知识 的 源泉 .精神 的 粮食 ”, 将 文字 设置 为 “隶书 ”红色 、 
36 像素 。 

@@ 预览 网 页 后 ,将 网 页 以 exel-1. html 为 名 保存 在 本 地 站 点 My site 中 。 

(3) 按 下 列 要 求 创建 如 图 1-3 所 示 的 网 站 相册 的 网 页 ,将 网 页 以 index. html 为 名 保 
存在 本 地 站 点 中 。 

用 photo 文 件 夹 中 的 t1. jpg 一 t8. jpg 图 像 创 建 网 站 相册 ,网 页 和 相册 标题 为 
“ 书 一 一 知识 的 源泉 ”, 标题 字体 为 “隶书 ”, 标 题 背 景 颜色 为 “#FFFF99”, 网 页 背景 图 像 
为 bg0006. jpg。 

@ 源 图 像 文件 夹 为 My site 文件 夹 下 photo 子 文件 夹 .目标 文件 夹 为 本 地 根 文件 夹 


My site。 
@ 页 面 图 像 的 缩 略图 尺寸 为 100X100 像素 ,每 行列 数 为 4 列 , 缩 略图 和 相片 格式 为 
PEG。 


@ 预览 网 页 后 ,将 网 页 index. html 背景 图 像 改 为 bg0017.jpg 后 保存 在 本 地 站 点 My 
site 中 。 

(4) 打开 网 页 文件 exel-1. html. 将 clock. txt 文件 中 的 代码 加 入 到 网 页 脚本 中 ,使 网 
页 浏览 时 右 下 角 出 现 一 个 时 钟 特效 。 


3. 实验 的 参考 步骤 
1) 网 页 编辑 器 的 基本 操作 


实验 1 Deameaer 8 入 门 及 基本 操作 的 实验 一 


E 书 一 一 知识 的 源泉 - 了 icrosoft Internet Exzplore 
文件 FE) 编辑 EE) 查看 (DD 收 疗 由 ) 工具 CI) 帮助 0D 
撤 ] C: My site\index. htm 


地 一 一 知识 的 源泉 


i : i: 
个 A 
ne MW 


tul. jpg tu2. jpg tu3. jpg tud. jpg 


了 人 


tu5. jpg tu6. jpg tu7. jpg 


图 1-3 网 页 应 用 练习 样张 三 


(1) 启动 和 退出 Dreamweaver 8 的 方法 如 下 。 

Q@ 选择 [开始 ] 人 程序] 人 Macromedial 上 Macromedia Dreamweaver 8 命令 或 双击 
Windows 桌面 上 的 KMacromedia Dreamweaver 8】 快 捷 图 标 , 即 可 启动 Dreamweaver 8。 

@) 还 可 在 Windows 资源 管理 器 中 选择 要 编辑 的 html 文件 , 右 击 该 文件 后 在 快捷 菜 
单 中 选择 【使 用 Dreamweaver 8 编辑 3 命令 也 可 启动 Dreamweaver 8。 

@ 要 退出 Dreamweaver 8, 可 单 击 窗口 关闭 按钮 或 按 快捷 键 Alt 十 F4 或 Ctrl 十 Q。 

(2) 用 快捷 键 打开 和 关闭 【 插 人 了 栏 和 【属性 了 面板 的 方法 如 下 。 

按 快捷 键 Ctrl 十 F2 和 Ctrl 十 F3 可 以 分 别 打 开 和 关闭 【插入 了 栏 和 【属性 了 面板 。 

(3) 对 【CSS]J 浮 动 面板 和 KKCSS] 浮 动 面 组 的 操作 方法 如 下 。 

a 单 击 [CSS 浮动 面板 组 左上 角 的 展开 按钮 ,打开 【CSS】 浮 动 面板 组 .然后 用 鼠标 指 
向 KCSS] 浮 动 面 板 组 的 左上 角 , 当 鼠标 指针 旦 4 个 小 箭头 移动 形状 时 ,将 其 先 移出 ` 再 移 
入 浮动 面板 放置 区 。 

@@ 打开 [CSS 浮动 面板 组 , 单 击 【5CSS 样式 的 标签 ,然后 单 击 【[CSS】 浮 动 面板 组 右上 
角 的 快捷 菜单 按钮 国 . 选 择 [ 将 CSS 样式 组 合 至 3I【 文 件 ] 命 令 , 可 完成 浮动 面板 重新 组 
合 的 操作 。 

(4) 打开 【框架 了 面板 .将 其 组 合 到 【 层 3 浮 动 面 板 组 的 操作 如 下 。 

9 选择 菜单 栏 【窗口 3 民 框 架 了 命令 ,打开 【框架 了 面板 。 

@ 单 击 【框架 面板 右上 角 的 快捷 菜单 按钮 ,选择 [将 框架 组 合 至 YIK 层 3 命令 ,可 完成 
浮动 面板 重新 组 合 的 操作 。 

(5) 用 快捷 键 关闭 和 打开 浮动 面板 组 ,用 鼠标 折 芭 和 展开 各 个 浮动 面板 组 ,查看 浮动 
面板 组 操作 后 的 效果 。 


4 一 一 一 一 一 一 一 一 电子 商务 网 站 建设 实验 指导 (第 2 版 ) 


用 快捷 键 关 闭 和 打开 浮动 面板 组 ,用 鼠标 折 全 和 展开 各 个 浮动 面板 组 ,操作 略 。 按 
F4 键 ,关闭 所 有 浮动 面板 。 

(6) Dreamweaver 8 中 窗口 .标尺 和 网 格 的 基本 操作 如 下 。 

za 单 击 网 页 编辑 区 下 方 状态 栏 中 的 [窗口 大 小 】BEBx 452 下 拉 式 按钮 ,然后 在 打开 
的 快捷 菜单 中 选择 合适 的 尺寸 。 

@ 选择 【查看 了 民 标 尺 ] 代 显 示 了 命令 ,然后 分 别 选择 【像素 英寸] 厘米 了 ,观察 设 
置 后 的 不 同 结果 。 

@ 选择 【查看 了 民 网 格 了 民 显 示 网 格 了 命令 ,可 
在 编辑 区 显示 网 格 , 选 择 【 网 格 设置 了 命令 可 打开 


【网 格 设置 ] 对 话 框 ,如 图 1-4 所 示 。 Ss 
@ 设计 者 可 将 [间隔 ]( 即 网 格 密度 ) 设 为 50 sa oe 
像素 ,将 【显示 3( 即 网 格 显 示 方 式 ) 设 为 【 线 ] 或 i 
【点 本 将 [颜色 3 ( 即 网 格 线条 颜色 ) 设 为 Ox 
并 CCCC99 ,选择 〖 靠 齐 到 网 格 ] 复 选 框 使 对 象 同 网 图 14 【网 格 设置 ] 对 话 框 
格 靠 齐 。 


2) 建立 网 站 的 基本 操作 

(1) 在 Windows 资源 管理 器 中 , 按 题目 要 求 将 实验 教程 的 配套 盘 中 ch01 文件 夹 中 
的 Material 文件 夹 复 制 到 本 地 站 点 的 根 目 录 下 ,然后 将 其 改名 为 My site。 

(2) 选择 [站 点 YI【 新 建站 点 命令 ,打开 【未 命名 站 点 1 的 站 点 定义 为 3 对 话 框 , 单 击 
【高 级 了 标签 ,在 【高 级 3 选项 卡 中 设置 【本 地 信息 】。 

在 【站 点 名 称 了 文本 框 中 输入 本 地 站 点 名 : 我 的 站 点 , 单 击 【 本 地 根 文件 夹 ] 文 本 框 右 
边 的 图 标 , 选 择 当 前 硬盘 根 文件 夹 下 的 My site, 将 其 设置 为 本 地 站 点 的 根 文件 夹 。 

单 击 【 默 认 图 像 文件 夹 3 文 本 框 右边 的 图 标 ,选择 文件 夹 My site 下 的 img 为 默认 的 
图 像 文 件 夹 。 在 【链接 相对 于 3 选项 中 选择 【文档 了 单 选 按钮 。 其 他 参数 默认 ,并 单 击 【 确 
定 了 按钮 完成 新 站 点 创建 。 

3) 制作 简单 网 页 

(1) 按 题目 要 求 制作 网 页 exel-1. html, 操 作 步 骤 如 下 。 

DO 将 配套 盘 中 本 章 素材 文件 夹 中 的 material 子 文件 夹 复制 到 当前 硬盘 的 根 文件 夹 
中 ,然后 改名 为 My site。 

@) 启动 Dreamweaver 8, 在 【起 始 页 3 中 选择 创建 新 的 [HTML] 项 目 , 此 时 创建 了 一 
个 未 命名 的 空白 网 页 。 

@ 选择 【站 点 了 民 新 建站 点 了 命令 。 单 击 【 高 级 了 标签 ,在 【高 级 选项 卡 中 设置 【本 地 信 
息 】。 

在 [站 点 名 称 ] 文 本 框 中 输入 “应 用 实例 ”, 单 击 【 本 地 根 文件 夹 3 文 本 框 右边 的 图 标 , 选 
择 当 前 硬盘 根 文件 夹 下 的 My site, 将 其 设置 为 本 地 站 点 的 根 文件 夹 。 

单 击 【 默 认 图 像 文 件 夹 3 文 本 框 右边 的 图 标 , 选 择 文件 夹 My site 下 的 img 为 默认 的 
图 像 文件 夹 。 在 【链接 相对 于 了 选项 中 选择 【文档 了 单 选 按钮 。 其 他 参数 默认 ,并 单 击 【 确 
定 了 按钮 完成 新 站 点 创建 。 


实验 1 Dreanwecver 8 入 门 及 基本 操作 的 实验 5 


由 在 Dreamweaver 8 网 页 编辑 器 窗口 中 为 新 网 页 设置 页 面 属性 ,选择 [修改 YI【 页 面 
属性 了 命令 ,在 【页 面 属 性 了 对 话 框 中 设置 各 项 参数 。 

在 【分 类 了 列表 框 中 选择 【外 观 3 选 项 单 击 【背景 图 像 了 右边 的 【浏览 了 按钮 选择 本 地 站 
点 的 文件 夹 img 中 的 文件 bg0100. jpg: 在 【重复 下拉 列 表 框 中 选择 【重复 3 选项 ,使 选择 
的 图 像 重 复 布 满 网 页 。 将 【左边 距 3 拉 右边 距 3【 上边 距 3【 下 边 距 3 分 别 设置 为 0 后 , 单 击 
【确定 3 按钮 确认 。 

@ 选择 [文件 3I【 男 存 为 】 命 令 . 将 网 页 以 exal-1. html 为 名 保存 在 本 地 站 点 My 
site 中 。 

@ 选择 [插入 XI【 布 局 对 象 3【 层 3 命令 或 选择 [插入 3 栏 的 [布局 〗 选 项 , 单 击 【 绘 制 层 】 
按钮 冉 ,在 网 页 文档 窗口 合适 的 位 置 绘 制 插入 图 像 定 位 用 的 层 Layerl ,并 将 光标 插 人 在 
层 中 。 选 择 【 搬 和 人 了 栏 的 [常用 选项 , 单 击 插入 图 像 按 钮 图 .在 打开 的 【选择 图 像 源 文件 了 
对 话 框 中 选择 要 插入 的 图 像 文 件 ,将 img 文件 夹 中 的 图 像 文件 earth. gif 搬入 层 中 ,并 将 
包含 图 像 的 层 调整 至 合适 位 置 。 

@ 单 击 图 像 earth. gif 将 其 选中 ,在 【属性 了 面板 中 单 击 【编辑 区域 中 的 多 按钮 ,启动 
外 部 图 像 编 辑 器 Fireworks 对 图 像 进 行 编辑 。 

在 打开 的 图 像 处 理 软件 Fireworks 的 文档 编辑 窗口 中 , 单 击 文 本 工具 AA, 在 [属性 3 面 
板 中 设置 文字 的 属性 ,字体 为 *Arial Black”, 大 小 为 “30”, 颜 色 为 “#000000”( 黑 色 )。 在 
合适 的 位 置 为 图 像 添 加 文字 “Welcome”。 

选中 文字 , 按 快捷 键 Ctrl 十 C 和 快捷 键 Ctrl 十 V ,将 文字 复制 一 份 , 并 将 文字 颜色 改 为 
“ 井 FFFFFF”( 白 色 ) ,适当 调整 文字 ,使 文字 产生 阴影 效果 。 单 击 文档 窗口 左上 角 的 【 完 
成 3 按钮 ,返回 Dreamweaver 8。 

@ 选择 [插入 了 栏 的 【布局 3 选项 , 单 击 【 绘 制 层 按钮 峰 . 在 网 页 文档 窗口 合适 的 位 置 
绘制 插入 文字 定位 用 的 层 Layer2 和 Layer3 ,并 在 层 中 输入 文字 “Business-to-Customer”。 

在 【属性 了 面板 中 设置 文字 的 属性 .字体 为 “Arial”, 大 小 为 “36”, 层 Layer2 中 文字 颜 
色 为 “黑色 ”, 层 Layer3 中 文字 颜色 为 “白色 ”, 适 当 调 整 层 的 位 置 , 使 文字 产生 阴影 效果 。 

@ 用 同样 的 方法 ,在 网 页 中 搬入 文字 "商务 网 站 欢迎 您 ”", 如 图 1-1 所 示 。 

@ 按 Fl2 键 预览 网 页 ,选择 【文件 了 民 保 存 了 命令 .将 网 页 以 exal-1. html 为 名 保存 在 
本 地 站 点 My site 中 。 

(2) 制作 网 页 exel-2. html, 操 作 步 骤 如 下 。 

JD 启动 Dreamweaver 8, 选 择 【K 站 点 了 民 新 建站 点 命令。 在 站 点 定义 对 话 框 中 ,选择 
【高 级 3 选项 卡 , 在 [站 点 名 称 ] 文 本 框 中 输入 “我 的 站 点 ”"。 单 击 【 本 地 根 文件 夹 3 文 本 框 右 
边 的 图 标 , 将 当前 盘 的 文件 夹 My site 设置 为 本 地 站 点 的 根 文件 夹 , 并 确认 。 

@) 在 Dreamweaver 8 网 页 编辑 器 中 新 建 一 个 页 面 。 选 择 〖 修 改 】I【 页 面 属性 命令， 
在 【页 面 属 性 了 对 话 框 中 设置 各 项 参数 。 

@ 在 【分 类 列表 框 中 选择 【外 观 了 选项 , 单 击 【背景 图 像 】 文 本 框 右边 的 【浏览 〗 按 钮 ， 
选择 本 地 站 点 的 文件 夹 img 中 的 文件 bg0005. jpg 后 ,在 【重复 下拉 列表 框 中 选择 【重复 】 了 
选项 ,使 选择 的 图 像 重复 布 满 网 页 。 将 【左边 距 】 民 右边 距 3【 上边 距 【下 边 距 3 分 别 设置 
为 0 后 , 单 击 【 确 定 了 按钮 。 在 【分 类 列表 框 中 选择 【标题 /编码 3 选项 ,在 【标题 】 文 本 框 中 


6 一 一 一 一 一 一 一 一 电子 商务 网 站 建设 实验 指导 (第 2 版 ) 


输入 : 书 , 其 他 参数 默认 ,然后 单 击 【确定 了 按钮 确认 。 

@ 选择 [文件 了 攻 另 存 为 了 命令 ,将 网 页 以 exel-2. html 为 名 保存 在 本 地 站 点 My 
site 中 。 

注意 : 第 田 步 是 非常 重要 的 一 步 , 千 万 不 要 省 略 。 完 成 了 这 一 步骤 后 ,在 网 页 上 插入 
的 都 是 相对 路 径 的 对 象 ,这 样 可 避免 很 多 因 路 径 问 题 找 不 到 对 象 的 错误 。 

@ 将 光标 定位 在 第 二 行 , 选 择 [ 插 入 3】I【 图 像 3 命 令 或 选择 [插入 ] 栏 [常用 】 选 项 , 单 击 
插入 图 像 按钮 图 ,在 打开 的 [选择 图 像 源 文件 3 对 话 框 中 ,选择 本 地 站 点 下 img 文件 夹 中 
的 文件 bg0012. jpg; 单 击 【 确 定 3 按 钮 确认 。 选 中 该 图 片 对 象 ,在 [属性] 面板 中 ,将 参数 
【 宽 ] 设 置 为 500 像素 ,【 高 3 设置 为 40 像素 ,然后 单 击 【 居 中 了 按钮 ,使 图 片 在 页 面 上 居中 。 
再 将 光标 定位 在 第 三 行 ,用 上 述 相 同 的 方法 插入 文件 welcome. jpg。 

@ 将 光标 定位 在 第 四 行 ,在 【属性 了 面板 中 单 击 【5 居中] 按钮 ,选择 【插入 了 栏 的 【常用 】 了 
选项 , 单 击 搬入 Flash 按钮 国 和 插 和 人 图像 按 钮 图 .在 网 页 中 依次 搬入 文件 shu2. swf 、shu. 
gif、shu4. swf。 

@ 单 击 图 像 shu. gif 将 其 选中 ,在 【属性 了 面板 中 单 击 【编辑 了】 区域 中 的 加 按钮 ,启动 外 
部 图 像 编 辑 器 Fireworks 对 图 像 进 行 编辑 ,在 打开 的 图 像 处 理 软件 Fireworks 的 文档 编 
辑 窗 口中 ,选择 【窗口 了 工 帧 3 命令 ,打开 【 帧 3 面板 . 单 击 【 帧 6 .选中 第 6 帧 。 

@ 选择 [文件 3IK 导 入 3 命令 ,导入 图 像 shu. jpg。 此 时 ,鼠标 指针 标 成 直角 ,在 被 编辑 
的 图 像 左 上 角 单 击 鼠 标 ,插入 图 像 shu. jpg。 单 击 Fireworks 编辑 窗口 左上 角 的 [完成 ] 按 
钮 ,返回 Dreamweaver 8。 

@ 在 网 页 合适 的 位 置 输入 文字 “知识 的 源泉 ,精神 的 粮食 ”。 在 【属性 3 面板 中 设置 文 
字 的 属性 ,字体 为 “隶书 ”, 大 小 为 36 ,文字 颜色 为 “红色 ”。 

外 按 Fl12 键 预览 网 页 ,选择 【文件 3I【 保 存 ] 命 令 , 将 网 页 以 exel-2. html 为 名 保存 在 
本 地 站 点 My site 中 。 

(3) 制作 网 站 相册 index. html, 操 作 步 骤 如 下 。 

J 选择 【文件 了 代 新 建 ] 命 令 .创建 新 文档 。 

@) 选择 【命令 了 区 创建 网 站 相册 了 命令 ,在 打开 的 【创建 网 站 相册 了 对 话 框 中 输入 各 类 
参数 ,如 图 1-5 所 示 。 

@ 单 击 【确定 了 按钮 ,Dreamweaver 8 自动 启动 Fireworks 8 为 网 页 图 像 完 成 批 处 理 。 

@ 选择 [修改 YI【 页 面 属性 3 命令 .将 My site\img 中 的 bg0006. jpg 图 片 作 为 该 网 页 
的 背景 ,将 标题 字体 设置 为 “隶书 ”, 标 题 背景 颜色 设置 为 "#FFFF99”。 

@ 选择 [文件 3I【 保 存 ] 命 令 , 将 网 页 以 index. html 为 名 保存 在 本 地 站 点 My site 中 。 

(4) 添加 HTML 代码 。 

Q@ 打开 文件 clock. txt, 按 快捷 键 Ctrl 十 A 和 Ctrl 十 C, 将 clock. txt 文件 中 的 代码 全 
选 后 复制 到 剪贴 板 。 

G@ 打开 网 页 文件 exel-1. html, 单 击 网 页 编辑 窗口 左上 角 的 【代码 了 按钮 ,切换 到 【 代 
码 】 视 图 ,在 标签 二 body 二 下 一 行 起 始 位 置 插入 光标 , 按 回 车 键 插入 空 行 ,在 空 行 处 按 快 
捷 键 Ctrl 十 V ,将 代码 添加 到 网 页 的 二 body 二 与 二 /body 二 标签 的 中 间 。 

@ 单 击 网 页 编辑 窗口 左上 和 角 的 【设计 按钮 ,切换 到 【设计 了 视图 ,代码 添加 完成 。 


实验 1 Drecanwecver 8 入 门 及 基本 操作 的 实验 也 


创建 网 站 相册 


: [Eile:///D /my site/photof 
= [eile:///D /ny sitey 
: |io0 x 100 国 显示 文件 名 称 


:4 
: [JrEG - 品质 较 高 。 ” 国 | 小 数位 数 : [100 jx 
为 每 张 相片 建立 导 览 页 面 


图 1-5 【创建 网 站 相册 3 对 话 框 


@ 预览 网 页 后 ,网 页 的 右 下 角 显 示 一 个 时 钟 特效 。 
@ 保存 网 页 文件 exel-1. html。 


4. 实验 后 的 思考 题 


(1) 在 本 地 站 点 下 新 建文 件 夹 `. 复 制 和 移动 文件 的 方法 有 哪 几 种 ? 

(2) 攻 文件 了 浮动 面板 中 的 【站 点 名 称 〗 和 该 站 点 网 页 编辑 器 的 【标题 3 中 的 内 容 分 别 表 
示 什 么 意思 ? 

(3) 输入 字符 时 ,Enter 键 和 Shift 十 Enter 键 的 作用 分 别 是 什么 ? 

(4) 在 文本 【属性 了 面板 中 ,用 【格式 了 下 拉 列 表 框 中 的 选项 设置 字体 的 格式 和 用 【 大 
小 了 下 拉 列 表 框 中 的 选项 设置 字体 的 格式 有 何 区 别 ? 

(5) 什么 是 本 地 站 点 ? 什么 是 文件 的 绝对 路 径 ? 什么 是 文件 的 相对 路 径 ? 

(6) 如 何 正确 设置 网 页 中 元 素 的 路 径 ? 如 何 避 免 浏览 网 页 时 缺少 对 象 的 错误 出 现 ? 

(7) 选择 【修改 YI【 页 面 属性 命令 ,打开 【页 面 属性 对 话 框 【外观 分 类 中 的 【重复 】 
下 拉 列 表 框 中 的 选项 如 何 使 用 ? 

(8) 选择 【修改 YI【 页 面 属性 命令 ,打开 【页 面 属性 3 对 话 框 ,【 链 接 ] 分 类 中 的 [变换 图 
像 链接 3【 链 接 颜 色 】【 已 访问 链接 3【 活 动 链接 分 别 表 示 什 么 意义 ? 

(9) 设计 网 页 时 使 用 的 字体 系统 没有 安装 ,如 何 能 够 将 需要 的 字体 添加 到 系统 中 去 ? 

(10) 如 何 编辑 字体 列表 ? 如何 将 字体 添加 到 字体 列表 中 ? 如 何 调整 字体 列表 中 的 
字体 次 序 ? 


8 一 一 一 一 一 一 一 一 一 电子 商务 网 站 建设 实验 指导 (第 2 版 ) 


风 层 与 表格 的 实验 


实验 


1. 实验 的 目的 与 要 求 


(1) 掌握 层 的 基本 操作 方法 。 

(2) 掌握 表格 创建 、 选 取 、 编 辑 和 格式 化 的 方法 。 

(3) 掌握 布局 表格 和 布局 单元 格 的 使 用 方法 。 

(4) 熟悉 层 的 组 套 、 番 放 次 序 更 改 和 可 见 性 设置 等 操作 。 


2. 实验 的 操作 内 容 


1) 表格 的 创建 .搬入 删除 .复制 和 移动 等 操作 

(1) 创建 一 个 名 为 exe2-1. html 的 网 页 文件 ,将 其 保存 到 本 地 站 点 My site 中 。 在 页 
面 上 输入 4 行 5 列 的 表格 ,表格 宽度 为 500 像素 ,表格 边框 为 2 像素 ,在 表格 中 输入 如 表 
2-1 所 示 的 内 容 , 并 在 表格 上 方 增加 标题 “信息 学 院 各 班 平均 成 绩 表 ”, 标 题 格式 设置 为 方 
正 舒 体 .24 号 、 粗 体 、#003366 。 


表 2-1 各 班 平 均 成 绩 表 
科目 数据 库 原 理 计算 机 组 成 实验 英语 精读 电子 商务 
00 级 1 班 73 85 77 79 
01 级 1 班 83 79 82 91 
01 级 3 班 90 80 85 92 


(2) 在 表格 “01 级 3 班 " 前 插入 一 行 ,内 容 为 “01 级 2 班 、85、82、88、82”。 在 表格 中 的 


“计算 机 组 成 实验 ” 列 前 插入 一 列 , 内 容 为 “计算 机 组 成 .69、73、75、80”。 


(3) 将 “00 级 1 班 "* 这 一 行 移 到 表格 的 倒数 第 二 行 ;删除 “英语 精读 ”这 一 列 。 
2) 单元 格 的 拆 分 、 合 并 和 格式 化 操作 
(1) 使 表格 中 的 数据 全 部 居中 ;使 整个 表格 在 页 面 上 居中 。 
(2) 按 不 同年 级 将 表格 拆 成 两 个 表格 ,将 01 级 表格 的 “科目 ”一 行 复制 到 00 级 表格 
上 方 , 使 之 成 为 00 级 表格 的 第 一 行 , 在 00 级 表格 上 面 加 上 一 行 标 题 “ 信 息 学 院 00 级 平均 
成 绩 表 ”, 并 删除 00 级 表格 的 “科目 ”这 一 列 。 
(3) 将 01 级 表格 的 “计算 机 组 成 "和 “计算 机 组 成 实验 ”两 个 单元 格 合并 成 一 个 单元 


格 ,内 容 改 为 “计算 机 组 成 和 实验 ”, 居 中、 黑体 14 号 。 

(4) 01 级 和 00 级 两 个 表格 分 别 套用 系统 预 设 的 格式 Simple3、Simple4。 

3) 导入 外 部 数据 和 表格 排序 

(1) 将 Excel 文件 value. xls 打开 .并 另存 为 value. csv 文件 ,数据 的 分 隔 符 是 逗号 。 

(2) 新 建 名 为 exe2-2. html 的 网 页 文件 :背景 图 片 为 bg0005. jpg。 导 入 数据 文件 
value. csv。 

(3) 按 表格 的 “合计 值 ? 列 降序 排序 ,合并 表格 标题 所 在 的 单元 格 ,并 使 标题 居中 。 

(4) 表格 套用 格式 是 系统 预 设 格式 “AltRows: green&.yellow”。 

(5) 表格 设置 【边框 3 为 3;〖 边 框 颜色 为 # FF0000。 

4) 层 的 基本 操作 

(1) 打开 exel-2. html 网 页 文件 。 在 网 页 合适 的 位 置 分 别 创建 两 个 名 为 “source” 和 
“shadow” 的 层 , 层 的 尺寸 为 550X70 像素 .Z 轴 的 值 分 别 为 2 和 1。 

(2) 在 层 中 输入 文字 “知识 的 源泉 ,精神 的 粮食 ”, 两 个 层 中 的 文字 颜色 分 别 为 红色 和 
黑色 。 移 动 层 , 使 两 个 层 略 微 错开 ,使 文字 带 有 阴影 效果 ,如 图 2-1 所 示 。 


| 知识 的 源泉 ， 靖 神 的 粮食 


图 2-1 两 个 层 错 开 重 登 示意 图 


(3) 打开 【 层 3 浮 动 面板 ,选择 【防止 重 和 到 了 复 选 框 , 然 后 移动 名 为 “source” 的 层 , 试 比 
较 该 复 选 框 选 与 不 选 的 区 别 。 

(4) 分 别 完成 激活 层 、 选 中 层 ,改变 层 的 大 小 、 改 变 层 的 可 见 性 的 操作 。 

(5) 改变 这 两 个 层 的 释放 次 序 ,使 名 为 “source” 的 层 成 为 “shadow” 层 的 子 层 , 观 察 改 
变 后 的 结果 ,然后 恢复 原样 。 

5) 创建 表格 定位 的 网 页 

(1) 按 下 述 要 求 制作 如 图 2-2 所 示 的 网 页 ,将 网 页 以 exe2-3. html 为 名 保存 在 本 地 站 
点 中 。 
页 面 的 背景 图 像 为 文件 夹 img 中 的 文件 bg0030. jpg, 并 设置 其 他 必要 的 网 页 
属性 。 

@ 在 合适 的 位 置 插入 文件 夹 img 中 的 图 像 exl. jpg。 

G) 在 网 页 中 输入 横 排 的 文字 : 

“一 件 好 的 作品 ,如 一 阵 清新 的 风 . 一 曲 温 婉 的 歌 : 让 人 心旷神怡 。 一 件 好 的 作品 ,如 
一 杯 香 醇 的 茶 ,一 瓶 陈 年 的 酒 , 让 人 回味 无 穷 ……。 

@ 预览 网 页 后 ,将 网 页 以 exe2-3. html 为 名 保存 在 本 地 站 点 的 文件 夹 My site 中 。 

(2) 制作 如 图 2-3 所 示 的 网 页 ,网 页 以 exe2-4. html 为 名 保存 在 本 地 站 点 中 。 

中 页面 的 背景 图 像 为 文件 夹 img 中 的 文件 bg0008. jpg, 并 设置 其 他 必要 的 网 页 
属性 。 
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下 实验 一 (练习 ) 一 Hicrosoft Internet Explorer 
文件 个) ”编辑 下 ) 查看 QD) 收 基 入 工具 I) 帮助 0D 


一 件 好 的 作品 ， 
此 一 阵 清 新 的 风 ， 
一 则 温 演 的 歌 ， 
让 人 心 旷 神 怕 。 


一 件 好 的 作品 ， 
此 一 杯 香 本 的 茶 ， 
一 次 陈 年 的 酒 ， 
社 人 回味 无 穷 ... 


图 2-2 网 页 应 用 练习 样张 一 


ba 
| 
| 
| 
| 
| 

人 


、 光 号 加 上 1 各 分 部 高 
-各 素 由 凡人 色 和 区 区 
-可 站 脏 伪 双 关内 | 
区 内 ”人 站” 
。 和 全 入 外 记 
、 沪 估 入 财 学 总 六 汶 
、 潍 所 各 也 癌 问 水 汶 
六 对 芝 仿 二 仿 部 闪 


图 2-3 网 页 应 用 练习 样张 二 


@ 在 网 页 合适 的 位 置 插入 文件 夹 img 中 的 文件 ex4. jpg。 

在 网 页 中 输入 竖 排 的 文字 : 

“假若 我 是 一 条 雪花 .翩翩 在 半空 里 潇 酒 , 一 定 认 清 我 的 方向 .飞扬 ,飞扬 ,飞扬 ,地 面 
上 有 我 的 方向 。 不 去 那 冷 家 的 幽谷 ,不 去 那 凄 清 的 山 昔 , 你 看 我 有 我 的 方向 !” 

文字 的 颜色 、 大 小 和 字体 自 定 。 

@@ 预览 网 页 后 .将 网 页 以 exe2-4. html 为 名 保存 在 本 地 站 点 的 文件 夹 My site 中 。 

6) 布局 表格 和 布局 单元 格 的 应 用 

(1) 制作 如 图 2-4 所 示 的 网 页 ,将 网 页 以 exe2-5. html 为 名 保存 在 本 地 站 点 中 。 
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@ 网 页 背景 图 片 文件 为 bg0052. jpg; 绘 制 600X360 像素 的 布局 表格 ,在 布局 表格 中 
绘制 3 行 5 列 布局 单元 格 , 每 个 布局 单元 格 为 120X120 像素 .如 图 2-4 所 示 。 

@ 如 图 2-4 所 示 , 在 布局 单元 格 中 分 别 设置 布局 单元 格 的 颜色 为 # CCCC99、 
# FF9900。 

@ 如 图 2-4 所 示 , 在 布局 单元 格 中 分 别 插入 jpg 文件 夹 中 的 名 为 tul. jpg 一 tu7. jpg 
的 图 片 。 

@ 在 网 页 中 插入 带 阴影 的 文字 “ 书 一 一 人 生 的 伴侣 ,知识 的 源泉 ”, 文 字 的 字体 、 大 小 
和 颜色 自 定 。 

@ 预览 页 面 后 ,将 网 页 以 exe2-5. html 为 名 保存 在 本 地 站 点 的 文件 夹 My site 中 。 


汉 布局 祝 图 实验 - 了 icrosoft Internet Explorer 加 问 加 | 
编辑 EE) 查看 收 疗 由 ) 工具 CD) 帮助 00 


书 一 一 人 生 的 伴 包 ， 知 戴 的 源 家 


ETT 


图 2-4 网 页 应 用 练习 样张 三 


(2) 制作 如 图 2-5 所 示 的 网 页 ,将 网 页 以 exe2-6. html 为 名 保存 在 本 地 站 点 中 。 

Oz 将 img 文件 夹 中 的 文件 bg0035. jpg 设置 为 背景 图 像 , 背 景 图 像 设 置 为 纵向 重复 ， 
并 设置 其 他 必要 的 网 页 属性 。 

@ 在 网 页 中 按 样张 绘制 800 xX 600 像素 的 布局 表格 ,在 页 面 底 部 合适 的 位 置 绘制 
700X65 像素 的 布局 单元 格 ,并 在 其 中 插入 swf 文件 中 的 fgl. swf。 

@ 在 网 页 左 侧 按 样张 面 4 个 大 小 为 93 X63 像素 的 布局 单元 格 ,并 在 其 中 分 别 插入 
鼠标 经 过 图 像 ,其 原始 图 像 文件 分 别 为 tul_2. gif、tu2_2. gif、tu3_2. gif、tu4_2. gif, 鼠 标 经 
过 图 像 文件 分 别 为 tul_1. gif\tu2_1. gif\tu3_1. gif\tu4_1. gif。 

@ 在 网 页 合适 的 位 置 按 样张 画 两 个 大 小 为 330 X230 像素 的 布局 单元 格 .在 其 中 一 
个 布局 单元 格 中 插入 img 文件 夹 中 的 逐 帧 图 像 文件 fangao. gif。 选 中 逐 帧 图 像 文件 
fangao. gif .启动 图 像 编 辑 软 件 Fireworks, 在 启动 软件 的 过 程 中 打开 源 图 像 文件 fangao. 
png ,并 完成 下 列 操作 : 
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。 在 逐 帧 图 像 文件 的 第 1 和 第 2 帧 之 间 插 入 一 帧 ,并 分 别 先 后 居中 导入 Frame. gif 
和 tul. jpg。 

。 在 逐 帧 图 像 文件 fangao. png 的 最 后 一 帧 仿照 第 1 帧 的 文字 样式 ,输入 带 阴 影 的 
文字 “名 画 欣 赏 ”, 文 字 格 式 : 字体 为 “隶书 ”. 大 小 为 70 像素 ,输入 文字 形式 为 
”, 居 中 对 齐 ,文字 颜色 为 # FF0000, 文 字 阴 影 的 颜色 为 #006633。 

。 将 逐 帧 图 像 文件 的 每 一 帧 播放 时 间 改 为 100/100 秒 , 并 播放 逐 帧 图 像 文件 ,然后 
单 击 【完成 了 按钮 ,返回 Dreamweaver 8。 

@) 在 网 页 另 一 个 330X230 像素 的 布局 单元 格 中 搬入 swf 文件 夹 中 的 Flash 文件 

fg3. swf。 
@ 预览 网 页 后 ,将 网 页 以 exe2-6. html 为 名 保存 在 本 地 站 点 的 文件 夹 My site 中 。 


图 2-5 网 页 应 用 练习 样张 四 


7) 添加 HTML 代码 
打开 网 页 文件 exe2-6. html, 用 代码 方式 添加 网 页 背景 音乐 ,音乐 文件 为 music 文件 
夹 中 的 文件 music. mid。 


提示 : 
一 bgsound src = "音乐 文件 名 ”loop = " -1 二 


3. 实验 的 参考 步骤 


1) 表格 的 创建 .插入 \ 删 除 ` 复 制 和 移动 等 操作 
(1) 表格 的 创建 :操作 步骤 如 下 。 
创建 一 个 名 为 exe2-1. html 的 网 页 文件 ,将 其 保存 到 本 地 站 点 My site 中 。 
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@ 输入 标题 文字 “信息 学 院 各 班 平均 成 绩 表 ”, 并 按 题目 要 求 格式 化 标题 。 

@ 选择 [插入 I【 表 格 3 命 令 或 选择 [插入 3 栏 的 [布局 3】 选项 , 单 击 【 表 格 ] 按 钮 国 , 也 可 
用 快捷 键 Ctrl 十 Alt 十 T, 此 时 网 页 编辑 窗口 中 会 弹出 【表格 3 对 话 框 。 在 此 对 话 框 中 , 设 
置 表格 为 4 行 5 列 , 表 格 的 宽度 为 500 像素 ,表格 边框 为 2 像素 ,其 他 参数 默认 ,然后 单 击 
【确定 3 按钮 确认 。 

@ 将 光标 插入 第 1 个 单元 格 并 输入 文字 “科目 ”, 按 Tab 键 移动 光标 ,依次 输入 其 他 
单元 格 中 的 文字 。 

(2) 表格 的 插入 ,操作 步骤 如 下 。 

@ 将 光标 插入 “01 级 3 班 ”这 个 单元 格 ,选择 【修改 YI【 表 格 3I【 插 入 行 ] 命 令 , 便 可 在 
要 求 位 置 上 插入 一 行 。 

@ 将 光标 插 人 “计算 机 组 成 实验 ”这 个 单元 格 ,选择 【修改 YI【 表 格 3I【 插 入 列 ] 命 令 ， 
便 可 在 要 求 位 置 上 插入 一 列 , 按 要 求 在 新 增 的 行 和 列 中 输入 内 容 。 

(3) 表格 的 复制 .移动 等 ,操作 步骤 如 下 。 

Q@ 选中 00 级 1 班 这 一 行 , 选 择 [ 编 辑 3I【 蚤 切 ] 命 令 ( 或 者 按 快捷 键 Ctrl 十 X) ,将 选中 
的 内 容 剪 切 到 剪贴 板 。 

@) 选中 最 后 一 行 , 按 快捷 键 Ctrl 十 V 便 可 完成 移动 操作 ;选中 “英语 精读 ”这 一 列 , 按 
Del 键 便 可 删除 该 列 。 

2) 单元 格 的 拆 分 、 合 并 和 格式 化 操作 

(1) 单元 格 的 居中 ,操作 步骤 如 下 。 

将 光标 插入 表格 的 第 1 个 单元 格 , 拖 动 鼠标 选中 全 部 单元 格 ,在 单元 格 的 5 属性 了 面板 
中 , 单 击 居中 按钮 国 |, 使 表格 中 的 数据 全 部 居中 ; 单 击 状态 栏 左 侧 标记 二 table 二 选中 整个 
表格 ,在 表格 的 【属性 了 面板 的 【KE 对 齐 了 下 拉 式 列表 框 中 选择 【居中 对 齐 3 选 项 ,使 整个 表格 在 
页 面 上 居中 。 

注意 : 单元 格 和 表格 两 种 [属性 了 面板 的 区 别 。 

(2) 单元 格 的 拆 分 ,操作 步骤 如 下 。 

Q@ 选中 表格 的 倒数 第 二 行 “00 级 1 班 ”, 按 快捷 键 Ctrl 十 C 将 该 行 复制 到 剪贴 板 , 然 
后 删除 该 行 。 

@ 按 数 次 回 车 键 在 表格 下 方 插入 空 行 , 然 后 按 快捷 键 Ctrl 十 V 将 *00 级 1 班 ”> 这 行 粘 
贴 到 页 面 中 , 便 可 将 1 个 表格 拆 成 两 个 表格 。 

@ 选中 01 级 表格 的 “科目 "一行 : 按 Ctrl 十 C 快捷 键 将 其 复制 到 剪贴 板 , 然 后 选中 00 
级 表格 的 第 1 个 单元 格 , 按 快 捷 键 Ctrl 二 V. 将 “科目 "一行 粘 贴 到 第 2 个 表格 上 。 

@ 按 要 求 在 第 2 个 表格 的 上 方 加 标题 “信息 学 院 00 级 平均 成 绩 表 ”。 选 中 00 级 表 
格 “ 科 目 ” 这 一 列 , 按 Del 键 删除 。 

(3) 单元 格 的 合并 ,操作 步骤 如 下 。 

选中 01 级 表格 的 “计算 机 组 成 "和 “计算 机 组 成 实验 ”两 个 单元 格 ,选择 【修改 代表 
格 了 区 合并 单元 格 了 命令 ,将 两 个 单元 格 合并 成 一 个 单元 格 , 并 将 内 容 改 为 “计算 机 组 成 和 
实验 ”, 选 中 这 些 文字 并 在 【属性 了 面板 中 按 要 求 完 成 格式 化 操作 。 

(4) 单元 格 的 格式 化 ,操作 步骤 如 下 。 
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分 别 选中 01 级 和 00 级 两 个 表格 ,选择 [命令 YI【 格 式 化 表格 3 命令 , 按 题目 要 求 分 别 
套用 系统 预 设 的 格式 “Simple3”、“Simple4”。 

3) 导入 外 部 数据 和 表格 排序 

(1) 在 Excel 中 打开 ch02 文件 夹 中 文件 value. xls, 选 择 【[ 文 件 了 民 另 存 为 了】 了 命令 ,在 
【另存 为 了 3 对话 框 中 选择 文件 保存 类 型 为 CSV( 喜 号 分 隔 ) ,用 文件 名 value. csv 保存 文件 。 

(2) 创建 名 为 exe2-2. html 的 网 页 文件 ,选择 【修改 YI【 页 面 属性 命令 ,设置 背景 图 片 
为 bg0005. jpg。 选 择 〖 文 件 3IK 导 入 XI【 表 格式 数据 3 命令 ,在 【导入 表格 式 数 据 】 对 话 框 中 
输入 导入 的 【数据 文件 了 为 value. csv, 设 置 【 定 界 符 了 为 逗 点 ,并 设置 好 表格 的 边框 线 宽 度 ， 
就 可 导入 指定 的 数据 文件 。 

(3) 选中 表格 的 “合计 值 ” 列 ,选择 【命令 3I【 排 序 表格 3 命令 ,在 【排序 表格 3 对 话 框 ( 见 
图 2-6) 中 设置 参数 : 

。 在 【排序 按 J 下 拉 列 表 框 中 选择 按 【 列 53( 即 第 5 列 ) 排 序 。 

。 在 【顺序 下拉 列表 框 中 ,可 选择 【 按 字母 排序 或 【 按 数字 排序 .在 其 右 侧 的 下 拉 

列表 框 中 ,选择 【升序 了 排序 或 【降序 了 排序 ,本 题 选 择 【 按 字母 排序 了 和 【降序 】。 
。 在 【再 按 了 下拉 列表 框 以 及 它 下 面 的 两 个 下 拉 列 表 框 中 ,设置 次 要 的 排序 参数 。 
。“【 选 项 3 区域 中 的 复 选 框 选 择 方法 见 教材 。 


排序 按 : | 列 5 司 
顺序 : | 按 字母 顺序 司 [降序 


再 按 : LL | | 
顺序 : | 摇 放 二 质 床 加 IE 


选项 : 口 排序 包含 策 一 行 

排序 标题 行 

排序 脚注 行 

完成 排序 后 所 有 行 颜色 保持 不 变 


图 2-6 【排序 表格 3 对 话 框 


选中 表格 第 一 行 ,选择 【修改 了 民 表 格 了 民 合 并 单元 格 了 命令 ,合并 表格 标题 所 在 的 单 
元 格 。 

(4) 选中 表格 ,选择 【命令 3I【 格 式 化 表格 】 命 令 , 表 格 选择 套用 系统 预 设 格式 
“AltRows: green&.yellow”, 

(5) 选中 表格 ,在 表格 的 【属性 了 面板 中 设置 【边框 3 为 3.【 边 框 颜色 为 # FF0000。 

4) 层 的 基本 操作 

(1) 打开 exel-2. html 的 网 页 文件 。 

(2) 单 击 [ 搬 人] 栏 的 【布局 3 选项 中 的 【绘制 层 ] 按 钮 对 或 选择 [插入 YI【 布 局 对 象 】 
【 层 ] 命 令 ,在 网 页 合适 的 位 置 分 别 创建 两 个 名 为 “source” 和 "shadow” 的 层 。 在 层 的 【 属 
性 了 面板 中 设置 层 的 大 小 尺寸 为 550X70 像素 .Z 轴 的 值 分别 为 2 和 1。 

(3) 在 两 个 层 中 输入 文字 “知识 的 源泉 ,精神 的 食粮 ”, 分 别 选中 层 中 文字 ,在 【属性 】 


实验 2 层 与 表格 的 实验 5 


面板 中 设置 两 个 层 中 的 文字 颜色 分 别 为 红色 和 黑色 。 选 择 【 窗 口 ] 了 攻 层 3 命令 或 按 F2 键 
打开 K 层 3 面板 ,取消 【防止 重 倒 3 复 选 框 。 移 动 层 , 使 两 个 层 略 微 错开 ,使 文字 带 有 阴影 效 
果 , 如 图 2-1 所 示 。 

(4)、 (5) 题 的 操作 分 别 在 层 的 【属性 了 面板 和 【控制 3 面板 中 完成 ,操作 步骤 略 。 

5) 创建 表格 定位 的 网 页 

(1) 制作 如 图 2-2 所 示 的 网 页 exe2-3. html, 操 作 步 骤 如 下 。 

Oz@ 检查 本 地 站 点 根 文件 夹 My site 中 与 本 例 有 关 的 素材 是 否 正 确 。 

@) 选择 【站 点 了 (管理 站 点 了 命令 ,检查 当前 站 点 设置 是 否 正 确 。 

@ 在 Dreamweaver 8 网 页 编辑 器 中 新 建 一 个 页 面 。 选 择 【修改 人 民 页 面 属性 了 命令 ， 
打开 【页 面 属 性 了 对 话 框 , 在 【页 面 属 性 了 对 话 框 中 设置 下 述 各 项 : 

在 【外 观 了 分 类 中 , 单 击 文本 框 【K 背 景 图 像 了 右边 的 【浏览 了 按钮 ,选择 本 地 站 点 的 img 
文件 夹 中 的 图 像 文 件 bg0030. jpg 后 , 单 击 【确定 了 按钮 :将 背景 图 像 设置 为 【重复 】。 

将 【左边 距 3【 右 边 距 【上 边 距 【下 边 距 分别 设置 为 0; 然后 单 击 【确定 了 按钮 
确认 。 

@ 选择 【文件 3I【 保 存 3 命 令 , 将 网 页 以 exa2-3. html 为 名 保存 在 本 地 站 点 My 
site 中 。 


@ 单 击 【 插 入 ] 栏 的 【常用 】 选 项 中 的 【表格 3 按钮 国 , 在 【表格 3] 对话 框 中 设置 表格 


。 设置 [ 行 数 ] 为 9.【 列 数 ] 为 2,【 宽 度 ] 为 700 像素 。 
。 设置 表格 的 【边框 粗细 3 为 0, 即 不 使 用 边框 效果 ,【 单 元 格 边 距 3 和 Kk 单元 格 间 距 】 
为 0。 

。 设置 【页 眉 了 为 “无 ,其 他 参数 默认 ,确认 后 在 网 页 文档 窗口 插入 表格 。 

@ 合并 第 1 列 第 2 行 至 第 8 行 的 单元 格 , 单 击 【搬入 了 栏 的 [常用 选项 中 的 【图 像 ] 按 
钮 圈 , 插 入 文件 夹 img 中 的 图 像 exl. jpg。 

@ 选中 第 2 列 第 1 行 至 第 9 行 的 单元 格 ,在 单元 格 的 【属性 了 面板 中 设置 单元 格 的 高 
度 为 40 像素 。 

@@ 在 表格 中 输入 文本 内 容 , 输 入 文字 前 要 设置 文字 的 颜色 .字体 和 字号 。 在 文字 的 
【属性 了 面板 中 ,设置 [文本 颜色 了 为 井 003399; 设 置 【 字 体 3 为 “华文 行 梢 ”; 设 置 文字 【5 大 小 】 
为 24 像素 。 

@ 空格 输入 。 可 以 将 输入 方式 设 为 全 角 方 式 , 然 后 输入 每 行文 字 前 的 空格 或 将 【 属 
性 了 面板 中 【格式 了 设置 为 “预先 格式 化 的 ”, 然 后 输入 空格 。 

@ 按 Fl2 键 预览 网 页 后 ,选择 【文件 了 工人 保 存 了 命令 ,将 网 页 以 exa2-3. html 为 名 保存 
在 本 地 站 点 My site 中 。 

(2) 制作 如 图 2-3 所 示 的 网 页 ,以 exe2-4. html 为 名 保存 在 本 地 站 点 中 ,操作 步骤 略 。 

6) 布局 表格 和 布局 单元 格 的 应 用 

(1) 制作 如 图 2-4 所 示 的 网 页 exe2-5. html, 操 作 步 骤 如 下 。 

@ 创建 一 个 名 为 exe2-5. html 的 网 页 文件 ,设置 网 页 背景 图 片 为 bg0052. jpg; 保 存 
在 本 地 站 点 中 。 
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@ 在 【插入 了 栏 的 【布局 3 选项 中 进行 工作 模式 切换 , 单 击 【 布 局 模式 了 按钮 后 , 进 人 【 布 
局 模式 】。 

@@ 单 击 【布局 模式 ] 区 域 中 的 【布局 表格 了 按钮 是 .将 鼠标 指针 移 到 网 页 编辑 窗口 中 ， 
此 时 鼠标 指针 变 为 十 字形 状 ,在 指定 位 置 拖 动 鼠 标 画 出 600X360 像素 的 布局 表格 。 

@ 单 击 【 布 局 模式 区 域 中 的 [布局 单元 格 3 按 钮 腾 . 在 布局 表格 中 夯 出 3 行 5 列 的 布 
局 单元 格 ,每 个 布局 单元 格 为 120X120 像素 ,图 2-4 所 示 。 

@@ 如 图 2-4 所 示 ,分 别 选 中 布局 单元 格 , 利 用 【属性 了 面板 设置 相应 的 布局 单元 格 背 
景 的 颜色 为 #CCCC99 、# 下 FE9900。 

@ 如 图 2-4 所 示 ,将 光标 分 别 插入 要 放置 图 片 的 布局 单元 格 , 单 击 【 插 入 3 栏 的 【 常 
用 7】 选项 中 的 [图 像 ] 按 钮 轿 , 分 别 插入 子 文件 夹 jpg 中 名 为 tul. jpg 一 tu7. jpg 的 图 片 
文件 。 

@ 在 网 页 合适 位 置 画 2 个 550 X70 像素 的 层 Layerl、Layer2, 按 题 意 输入 文字 
“ 书 一 一 人 生 的 伴侣 ,知识 的 源泉 ”。 

@ 选中 层 Layerl 中 文字 ,在 属性 面板 中 设置 【字体 为“ 隶书”,【 大 小 ] 为 24 民 颜色 】 
为 #993300,【 样 式 ] 为 “ 粗 体 ”", 将 Layer2 中 文字 颜色 改 为 黑色 ,其 他 参数 同 Layerl 中 文 
字 的 设置 。 

@ 将 层 Layer2 略微 错开 和 Layerl 释放 在 一 起 ,设计 出 文字 阴影 效果 。 

中 按 F12 键 预览 页 面 后 ,将 网 页 文件 以 exe2-5. html 为 名 保存 在 My site 文件 夹 中 。 

(2) 制作 如 图 2-5 所 示 的 网 页 exe2-6. html, 操 作 步 又 如 下 。 

QO@ 检查 本 地 站 点 根 文件 夹 My site 中 与 本 例 有 关 的 素材 是 否 正确 。 

@ 新 建 一 个 页 面 ,选择 [修改 YI【 页 面 属性 命令 ,在 【页面 属 性 3 对 话 框 中 设置 背景 图 
片 为 bg0035. gif, 将 背景 图 像 设 置办 [纵向 重复 也 ,将 【左边 距 3 工 右边 距 3【 上边 距 ]【 下 边 
距 了 分别 设置 为 0, 其 他 参数 默认 ,然后 单 击 【确定 3 按钮 确认 。 并 将 网 页 以 exe2-6. html 为 
名 保存 在 My site 文件 夹 中 。 

@ 在 【插入 了 栏 的 【布局 3 选项 中 进行 工作 模式 切换 , 单 击 【布局 模式 了 按钮 后 . 进 人 【 布 
局 模式 了 ,再 单 击 【 布 局 模式 ] 区 域 中 的 【布局 表格 3 按钮 是 .将 鼠标 移 到 网 页 编辑 窗口 中 ， 
此 时 鼠标 指针 变 为 十 字形 状 , 在 指定 位 置 拖 动 鼠标 画 出 800X600 像素 的 布局 表格 。 

@ 单 击 【 布 局 模式 区域 中 的 [布局 单元 格 ] 的 按钮 丹 , 在 页 面 底部 合适 的 位 置 按 题目 
要 求 绘制 700X65 像素 的 布局 单元 格 。 在 布局 单元 格 中 插入 光标 , 单 击 【插入 3 栏 的 [ 常 
用 3 选项 中 的 Flash 按钮 力 或 选择 [插入 3】I【 媒 体 YIKFlash] 命 令 , 此 时 可 在 网 页 顶部 的 布 
局 单元 格 中 插入 Flash 文件 fgl. swf。 

@ 在 网 页 左 侧 按 样张 画 4 个 大 小 为 93X63 像素 的 布局 单元 格 , 按 题 意 插 入 鼠标 经 
过 图 像 。 选 择 [ 插 入 I【 图 像 对 象 3I【 鼠 标 经 过 图 像 ] 命 令 ,在 【插入 鼠标 经 过 图 像 〗 对 话 框 
中 按 题 意 设置 [原始 图 像 3fI【 鼠 标 经 过 图 像 】。 

@ 在 网 页 合适 的 位 置 按 样张 画 两 个 大 小 为 330 X230 像素 的 布局 单元 格 , 单 击 【 插 
入 3 栏 的 〖 常 用】 选项 中 的 【图像 3 按钮 图 或 选择 [插入 3】I【 图 像 3 命 令 , 在 其 中 一 个 布局 单元 
格 中 插入 img 文件 夹 中 的 逐 帧 图 像 文 件 fangao. gif。 选 择 [ 插 入 I【 媒 体 3IKFlash] 命 令 ， 
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在 另 一 个 330X230 像素 的 布局 单元 格 中 插入 swf 文件 夹 中 的 Flash 文件 fg3. swf。 

@ 单 击 图 像 fangao. gif 将 其 选中 ,在 【属性 了 面板 中 : 单 击 【编辑 】 区 域 中 的 加 按钮 , 启 
动 外 部 图 像 编 辑 器 Fireworks 对 图 像 进行 编辑 。 在 启动 时 ,打开 img 文件 夹 中 的 源 图 像 
文件 fangao. png。 在 打开 的 Fireworks 的 文档 编辑 窗口 中 ,选择 【窗口 了 由 3 命令 ,打开 
【 帧 3 面板 ,并 选中 第 1 帧 。 单 击 【 帧 3 面板 右上 角 的 菜单 按钮 ,在 菜单 中 选择 【添加 帧 3 命 
令 ,在 当前 帧 后 增加 1 帧 。 选 择 【[ 文 件 了 导入 命令, 分别 先后 居中 导入 Frame. gif 和 
tul.jpg。 

@@ 选中 第 8 帧 , 单 击 文 本 工具 A .仿照 第 1 帧 的 文字 样式 ,输入 文字 “名 夯 欣 赏 ”, 在 
【属性 了 面板 中 设置 文字 格式 ,字体 为 “隶书 ”, 大 小 为 70 像素 , 町 人 文字 形式 为 "名 加 ?5 并 
使 文字 居中 ,文字 颜色 为 # FF0000。 按 快捷 键 Ctrl 十 C、Ctrl 十 V 复制 并 粘贴 文字 ,将 
原先 的 文字 颜色 设 为 #006633, 使 两 组 文字 释放 在 一 起 ,并 稍微 错开 ,形成 文字 阴影 
效果 。 

@@ 单 击 【 帧 3 面板 中 第 1 帧 , 按 住 Shift 键 后 单 击 最 后 1 帧 ,选中 所 有 帧 ,双击 帧 右边 
的 帧 延 时 ,将 逐 帧 图 像 文 件 的 每 一 帧 播放 时 间 改 为 100/100 秒 , 并 播放 逐 帧 图 像 文 件 , 然 
后 单 击 〖 完 成 7 按钮 ,返回 Dreamweaver 8。 

四 按 Fl12 键 预览 页 面 ,屏幕 显示 如 图 2-5 所 示 的 结果 后 .保存 文件 。 

7) 添加 HTML 代码 

(1) 打开 网 页 文件 exe2-6. html, 单 击 网 页 编辑 窗口 左上 角 的 【代码 了 按钮 ,切换 到 【 代 
人 码 ] 视 图 ,在 标签 二 body 二 下 一 行 起 始 位 置 插入 光标 , 按 回 车 键 插入 空 行 ,在 空 行 处 添加 
代码 


< 一 bgsound src= "music/music.mid" loop="—-1"> 


(2) 单 击 网 页 编辑 窗口 左上 和 角 的 【设计 了 按钮 ,切换 到 【设计 3 视图 ,代码 添加 完成 。 
(3) 预览 网 页 后 , 听 到 网 页 背景 音乐 。 
(4) 保存 网 页 文件 exe2-6. html。 


4. 实验 后 的 思考 题 


(1) 表格 属性 中 的 【间距 3 边框 了 填充 了 的 具体 意义 表示 什么 ?” 表格 的 单元 格 、 行 、 
列 和 整个 表格 的 选取 方法 有 哪 几 种 ? 

(2) 表格 的 属性 面板 和 单元 格 的 属性 面板 的 主要 区 别 在 哪里 ? 

(3) 试 比较 【标准 视图 了 和 [布局 视图 了 两 种 模式 的 不 同 之 处 。 如 何 连续 画 出 多 个 【 布 
局 表格 3? 当 切 换 到 [标准 模式 3 后 【布局 表格 3 和 普通 表格 一 样 吗 ? 

(4) 表格 中 可 以 导入 的 外 部 数据 文件 的 格式 有 几 种 ? 如 果 要 导出 数据 文件 ,文件 中 
的 数据 分 隔 符 有 几 种 ? 

(5) 如 何 对 表格 中 的 数据 排序 ? 如 果 排 序 的 关键 列 是 数字 :那么 在 【顺序 下拉 列表 
框 中 ,选择 【 按 字 母 排序 3 与 [ 按 数字 排序 3 有 何 区 别 ? 

(6) 比较 选中 层 和 激活 层 的 区 别 。 正 确 理解 层 的 至 放 次 序 、 层 的 可 见 性 、 层 嵌 套 
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关系 。 

(7) 如 何 防止 层 重 全 ? 子 层 一 定 在 父 层 中 吗 ? 子 层 一 定 在 父 层 上 吗 ? 父 层 设置 了 不 
可 见 属性 , 子 层 也 一 定 不 可 见 吗 ? 层 的 名 称 中 不 能 使 用 哪些 字符 ? 

(8) 如 何 使 用 布局 表格 和 布局 单元 格 ? 试 比较 用 表格 、 布 局 表格 和 层 来 规划 网 页 页 
面 布局 的 优 缺 点 。 
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os 全 二 -起 链接 与 框架 网 页 的 实验 


1. 实验 的 目的 与 要 求 


(1) 掌握 文本 、 图 像 ,图像 热 点 `E-mail、 锚 点 链接 的 方法 。 
(2) 熟悉 导航 条 和 跳 转 菜单 的 创建 和 使 用 方法 。 
(3) 掌握 框架 网 页 的 创建 .编辑 和 保存 的 方法 。 


2. 实验 的 操作 内 容 


1) 创建 超 链 接 
(1) 创建 符合 下 列 条 件 的 如 图 3-1 所 示 的 网 页 ,将 网 页 以 exe3-1. html 为 名 保存 在 本 


上 洗 隔 加 [在 ] 
中 文雅 虎 


如 党 棒 本 


图 3-1 网 页 超 链接 练习 样张 


地 站 点 My site 中 。 

za 设置 网 页 的 背景 图 像 为 img 文件 夹 中 bg0002. jpg, 横 向 重复 ,并 设置 其 他 必要 的 
网 页 属性 后 保存 文件 。 

@ 在 网 页 中 绘制 800X700 像素 的 布局 表格 ,在 布局 表格 中 从 上 到 下 依次 绘制 800X 
80 像素 、140X30 像素 、100X180 像素 、458 X 300 像素 、180 X35 像素 、544 X64 像素 布局 
单元 格 。 

@ 在 网 页 顶部 800X 80 像素 的 布局 单元 格 中 插入 swf 文件 夹 中 的 shu. swf 文件 ,在 
网 页 中 部 458 X300 像素 的 布局 单元 格 中 插入 img 文件 夹 中 的 e_commerce. jpg 文件 ,在 
网 页 底部 180 X35 像素 和 544X64 像素 的 布局 单元 格 中 分 别 插入 img 文件 夹 中 的 wyfy. 
gif 和 a5. gif 文件 。 

@ 在 网 页 左 侧 140X30 像素 的 布局 单元 格 中 插入 一 个 跳 转 菜单 , 跳 转 菜单 的 第 1 项 
标识 文字 为 “上 海 热 线 ”, 添 加 前 往 跳 转 按钮 。 跳 转 菜 单 的 选项 和 链接 网 页 的 URL 分 
别 为 : 

上 海 热 线 http://www. online. sh. cn 

搜狐 http://www. sohu. com 

网 易 http://www. 163. com 

中 国 雅 虎 http://www. yahoo. com. cn 

@ 在 网 页 左 侧 100X180 像素 的 布局 单元 格 中 插入 一 个 垂直 的 导航 条 ,导航 条 上 六 
个 按钮 分 别 为 “科学 技术 ”“ 生 活 艺术 ”“ 现 代 文 学 ”"“ 文 化 教育 "“ 电 子音 像 *“ 精 品系 
列 ”, 六 个 按钮 对 应 的 图 像 文 件 分 别 是 文件 夹 button 中 的 文件 al. gif、a2. gif、a3. gif、a4. 
gif、bl. gif\b2. gif、… 、f2. gif 、f3. gif、f4. gif, 六 个 按钮 所 链接 的 网 页 分 别 为 scie. html、art. 
html literature. html\edu. html\elec. html、quali. html。 

@ 选中 网 页 文档 底部 的 图 像 文件 wyfy. gif ,创建 E-mail 链接 ,E-mail 地 址 为 练习 者 
正式 注册 的 电子 邮件 地 址 。 

@ 在 网 页 中 间 的 图 像 文件 e_commerce. jpg 的 计算 机 显示 屏 、 圆 形 卫星 天 线 和 人 像 


件 的 单个 图 像 上 绘制 多 边 形 . 圆 形 和 和 抢 形 热点 ,热点 被 链接 的 目标 端点 分 别 选 自 html 文 
件 夹 中 的 网 页 文件 。 

@@) 预览 网 页 后 ,将 网 页 以 exe3-1. html 为 名 保存 在 本 地 站 点 My site 中 。 

(2) 打开 html 文件 夹 中 的 网 页 文件 literature. html, 并 完成 下 列 操作 。 

a 在 网 页 文件 literature. html 的 首尾 的 两 处 “中 国文 学 ”之 中 ,分 别 插入 名 为 “w1” 和 
“w22” 的 锚 点 。 

G@ 用 网 页 文件 literature. html 第 1 行 中 的 文字 “古老 民族 ”作为 锚 点 w2 的 源 端点 ， 
建立 内 部 锚 点 链接 。 

@ 打开 exe3-1. html 网 页 文档 ,选中 网 页 底部 a5. gif 图 像 文件 最 右边 的 热点 ,建立 
网 页 文件 literature. html 中 锚 点 wl1 的 外 部 锚 点 链接 ,被 链接 的 网 页 在 新 的 浏览 器 窗口 
中 显示 。 

2) 框架 和 框架 集 的 创建 .选择 和 保存 
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(1) 创建 一 个 名 为 exe3-2. html 的 网 页 文件 ,并 完成 下 列 框架 操作 。 

@ 用 鼠标 .菜单 两 种 不 同 的 方法 在 exe3-2. html 的 网 页 中 创建 【 左 侧 和 艇 套 的 顶部 框 
架 了 和 【顶部 和 衣 套 的 左 侧 框架 了 . 试 比 较 两 种 框架 的 不 同 之 处 。 

@ 删除 上 题 中 创建 的 框架 ,然后 创建 【顶部 框架 了 .并 把 【顶部 框架 了 改 为 【顶部 和 舱 套 
的 左 侧 框 架 】, 即 可 调整 框架 的 大 小 。 

@ 在 【框架 面板 中 ,分 别 用 鼠标 选中 主 框 架 (Mainframe) 、 左 框架 (Leftframe)、 顶 框 
架 (Topframe) 和 整个 框架 集 , 观 察 结 果 。 

(2) 在 exe3-2. html 的 网 页 文件 中 ,完成 下 列 框 架 操作 。 

GO 在 主 框架 (Mainframe) 中 插入 底部 框架 (Bottomframe) ,选中 左 框架 (Leftframe) 
插入 顶部 框架 ,将 左 框 架 分 割 成 上 (Topframel) 下 (Leftframe) 两 部 分 。 

@ 将 左 框架 (Leftframe) 调 整 为 与 底部 框架 (Bottomframe) 高 度 相 同 。 

@ 分 别 在 框架 面板 中 选中 topframe、topframel、mainframe、leftframe、bottomframe 
5 个 框架 ,并 给 这 5 个 框架 设置 背景 颜色 # AAFFFF、# CCFFFF、 # CCFFCC、 
间 CCFFCC、##CCFFFF。 

@ 以 topframe、 topframel、mainframe、 leftframe、bottomframe 为 框架 文件 名 和 
exe3-2. html 为 框架 集 名 保存 框架 文件 。 

3) 设置 框架 和 框架 集 的 属性 和 超级 链接 

(1) 按 下 列 要 求 ,设置 框 架 网 页 exe3-2. html 的 框架 集 属性 。 

Q@ 打开 框架 网 页 文件 exe3-2. html, 设 置 该 网 页 的 框架 集 的 属性 。 各 项 参数 分 别 是 : 
【边框 ] 为 “是 ”,【 边 框 颜色 为 #00CCFF.【 边 框 宽度 ] 为 2 像素 ,左边 【 列 ] 为 200 像素 。 

@ 设置 【5 列 了 的 单位 ,在 【单位 了 下 拉 式 菜单 中 分 别 选 择 【 像 素 ] 了 【百分比 了 相对] 命 
令 ,观察 不 同 的 结果 。 

@ 在 名 为 topframel 的 框架 中 ,插入 一 个 大 小 为 120X160 像素 的 层 , 层 中 插入 4 行 
1 列 的 表格 ,表格 为 120X160 像素 ,边框 宽度 为 0 像素 。 

@ 在 表格 的 4 个 单元 格 里 分 别 插入 img 文件 夹 中 4 个 按钮 图 片 文件 al. jpg、a2. jpg、 
a3. jpg、a4. jpg。 

加 在 主 框架 (Mainframe) 中 .设置 框架 链接 的 页 面 文件 为 html 文件 夹 中 的 
literature. html;【 深 动 ] 的 方式 为 自动 ;〖 边 框 宽度 ] 为 120 像素 ;〖 边 框 高 度 ] 为 30 像素 。 

在 顶 框架 (Topframe) 中 .插入 swf 文件 夹 中 的 Flash 文件 shu. swf。 

在 左 框 架 (Leftframe) 和 底部 框架 (Bottomframe) 中 输入 如 图 3-2 所 示 的 文字 。 

@ 在 【属性 ] 面 板 中 分 别 为 4 个 单元 格 里 的 按钮 图 片 建立 超 链接 ,被 链接 的 网 页 文件 
分 别 是 html 文件 夹 中 的 literature. html art. html、edu. html、scie. html, 被 链接 的 网 页 在 
主 框架 中 显示 。 

@ 预览 网 页 后 ,保存 网 页 文件 。 

(2) 按照 图 3-3 所 示 的 样张 ,创建 符合 下 列 要 求 的 “下 方 和 艇 套 的 左 侧 框架 ”网 页 文 
件 ,框架 集 文件 名 为 exe3-3. html,; 将 三 个 框架 网 页 的 页 面 属性 【左边 距 】【 右 边 距 【上 边 
距 3【 下 边 距 3] 设 为 0, 并 完成 下 列 要 求 。 

@O 左 框架 网 页 文件 名 为 left. html, 并 设置 背景 图 像 为 bg0000. gif, 左 框架 的 【 列 了 宽 
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下 框架 网 页 实验 - 了 icrosoft Internet Explorer 
文件 到 ) ， 编 转世) 查看) 收藏) 工具 GD 稍 助 


中 国文 学 


二 下 攻 天 二 全 太志 于 直 二 < 中 国 
形式 之 丰 ， 这 本 六 站 国 站 
歌 衣 就 在 人 | 


省 书籍 推介 网 站 教研 室 制作 版 权 所 有 
Copyright (c)2003 All Rights Reserve 


时 我 的 电脑 


图 3-2 框架 网 页 练习 样张 一 


校园 景色 


图 3-3 框架 网 页 练习 样张 二 


度 为 320 像素 区 滚 动 3 方 式 为 自动 。 在 左 侧 框架 left. html 中 ,如 图 3-3 所 示 绘 制 4 个 大 
小 为 103X76 像素 的 布局 单元 格 , 并 在 其 中 分 别 插入 鼠标 经 过 图 像 ,原始 图 像 为 t1_1. 
gif\t2_1. gif\t3_1. gif、t4_1. gif,; 鼠标 经 过 图 像 为 tl. gif、t2. gif、t3. gif、\t4. gif。 

@ 底部 框架 网 页 文件 名 为 bott. html, 底 框架 的 [ 行 ] 高 度 为 65 像素 ,设置 背景 颜色 
为 #DDFFFF ,并 插入 Flash 文件 camp. swf。 

@ 设置 主 框架 网 页 文件 名 为 right. html, 设 置 背 景 颜 色 为 和 白色。 在 网 页 合适 的 位 置 


实验 3 超 链 接 与 框架 网 页 的 实验 2 


输入 文字 “校园 景色 ”, 字 体 大 小 颜色 自 定 。 在 右 侧 主 框架 网 页 文件 中 , 如 图 3-3 所 示 绘 
制 1 个 大 小 为 290X220 像素 的 布局 单元 格 ,在 其 中 插入 图 像 frame. gif, 在 图 像 frame. gif 
上 面 绘 制 大 小 为 269X202 的 层 ,在 层 中 插入 图 像 pl. jpg, 如 图 3-3 所 示 。 

@ 给 网 页 左 框架 中 第 1 个 鼠标 经 过 图 像 建立 超 链接 , 单 击 该 鼠标 经 过 图 像 时 ,在 主 
框架 中 显示 被 链接 的 网 站 相册 文件 indexl. html。 

@ 给 网 页 左 框架 中 第 2 个 鼠标 经 过 图 像 建 立 超 级 链接 , 单 击 该 鼠标 经 过 图 像 时 ,在 
新 的 浏览 窗口 中 显示 被 链接 的 网 页 ,被 链接 的 对 象 为 literature. html 文件 中 的 锚 点 w2。 

@@ 给 网 页 左 框架 中 第 3 个 鼠标 经 过 图 像 添 加 E-mail 链接 ,地 址 为 练习 者 本 人 的 邮箱 
地 址 。 

@ 保存 全 部 框架 网 页 ,并 预览 框架 网 页 。 


3. 实验 的 参考 步骤 


1) 创建 超 链接 

(1) 制作 如 图 3-1 所 示 的 网 页 exe3-1. html, 操 作 步 骤 如 下 。 

@ 将 本 章 素材 文件 夹 中 的 素材 复制 到 文件 夹 My site 中 ,并 将 其 设 为 本 地 站 点 。 

@ 新 建 一 个 页 面 ,选择 【修改 人民 页 面 属性 了 命令 ,在 【页 面 属 性 对话 框 中 设置 背景 图 
像 为 bg0002. jpg, 横 向 重复 ;将 【左边 距 3【 右 边 距 【上 边 距 3】【 下 边 距 分 别 设 舞 为 0; 其 
他 参数 默认 ,然后 单 击 【确定 按钮 确认 ,并 将 网 页 以 exa3-1. html 为 名 保存 在 My site 文 
件 夹 中 。 

@ 在 【插入 了 栏 的 【布局 了 选项 中 进行 工作 模式 切换 , 单 击 【布局 了 按钮 后 , 进 人 【布局 模 
式 】。 

单 击 【 布 局 模式 选项 中 的 【布局 表格 ] 的 按钮 辟 . 将 鼠标 指针 移 到 网 页 编辑 窗口 中 ， 
此 时 鼠标 指针 变 为 十 字形 状 , 在 指定 位 置 拖 动 鼠 标 画 出 800X700 像素 的 布局 表格 。 

@ 在 页 面 的 合适 位 置 按 住 Ctrl 键 分 别 按 题目 要 求 画 出 800 x 80 像素 .140X30 像 
素 、100X180 像素 .458X300 像素 .180X35 像素 .544X64 像素 的 布局 单元 格 。 

@@ 在 网 页 顶部 的 布局 单元 格 中 插入 光标 .选择 【插入 】I【 媒 体 YI【Flash] 命 令 , 择 入 
swf 文件 夹 中 的 动画 文件 shu. swf。 

在 网 页 中 部 458X300 像素 的 布局 单元 格 中 插入 光标 ,选择 [插入 3I【 图 像 ] 命 令 ,插入 
img 文件 夹 中 的 图 像 文件 e_commerce. jpg。 

在 网 页 底部 180X35 像素 和 544X64 像素 的 布局 单元 格 中 分 别 插入 img 文件 夹 中 的 
wyfy. gif 和 a5. gif 文件 。 

@ 在 网 页 左 侧 140 X30 像素 的 布局 单元 格 中 搬入 光标 :选择 【 搬 和 人 了 民 表 单 了 了 民 跳 转 
菜单 了 命令 。 在 弹出 【插入 跳 转 菜单 】3 对 话 框 中 创建 一 个 菜单 选项 ,可 在 文本 框 中 输入 菜单 
选项 的 文字 “上 海 热线 ”, 在 【选择 时 , 转 到 URL] 文 本 框 中 ,输入 选择 该 菜单 选项 所 链接 的 
网 站 域名 http://www. online. sh. cn, 单 击 于 | 按钮 添加 这 个 菜单 项 。 

用 同样 的 方法 创建 其 他 跳 转 菜单 选项 ,完成 跳 转 菜单 选项 的 创建 后 确定 。 

@ 在 网 页 左 侧 100X180 像素 的 布局 单元 格 中 插入 光标 ,选择 菜单 【插入 I【 图 像 对 
象 了 导航 条 了 命令 或 者 单 击 【插入 3 栏 的 【常用 选项 ,再 单 击 【 导 航 条 按钮 侍 . 此 时 在 网 


24 一 电子 商务 网 站 建设 实验 指导 (第 2 版 ) 


页 文档 窗口 中 会 弹出 【插入 导航 条 对话 框 。 

在 【项 目 名 称 】 文 本 框 中 设置 第 1 个 按钮 的 名 称 为 : a; 单 击 【 浏 览 ] 按 钮 ,在 4 个 按钮 
状态 的 文本 框 中 分 别 输入 button 文件 夹 中 的 al. gif、a2. gif、a3. gif、a4. gif 四 个 文件 的 路 
径 和 名 称 ; 在 【 按 下 时 ,前 往 的 URL] 文 本 框 中 输入 该 按钮 链接 对 象 的 名 称 和 路 径 , 选 中 
【预先 载 人 图 像 3fI【 使 用 表格 选项。 选择 【插入 3 下 拉 式 列表 框 中 的 垂直 方向 设置 导 
航 条 。 

重复 步骤 @ ,可 设置 其 他 5 个 按钮 。 

@@ 选中 网 页 文档 底部 的 图 像 文件 wyfy. gif, 在 【属性 了 面板 的 【链接 了 文本 框 中 ,输入 : 
mailto: 十 二 E-mail 地 址 二 , 便 可 建立 E-mail 链接 。 

@ 选中 网 页 中 间 的 图 像 文件 e_commerce. jpg, 单 击 图 像 【 属 性 了 面板 左下 方 的 多 边 形 
图 标 | 到 ,然后 在 图 片 的 人 像 上 依次 单 击 建立 热 区 。 在 【热点 了 的 【属性 了 面板 中 ,为 【链接 了 
文本 框 设置 的 链接 文件 是 html 文件 夹 中 的 网 页 文件 (自选 ), 在 【目标 了 下 拉 列 表 框 中 选 
择 _Blank 选项 ,表示 在 新 的 窗口 中 显示 该 页 面 。 

用 同样 的 方法 在 计算 机 显示 屏 、 圆 形 卫星 天 线 设置 圆 形 和 和 抢 形 热点 链接 ,并 分 别 设置 
链接 的 网 页 文件 。 

外 预览 网 页 后 ,将 网 页 以 exe3-1. html 为 名 保存 在 本 地 站 点 My site 中 。 

(2) 按 题目 要 求 创建 锚 点 链接 ,操作 步 又 如 下 。 

@ 打开 html 文件 夹 中 的 网 页 文件 literature. html, 将 光标 分 别 插入 在 网 页 文档 首尾 
的 两 处 “中 国文 学 ”之 中 ,选择 [插入 XI【 命 名 锚 记 3 命令 ,在 弹出 的 [命名 锚 记 】 对 话 框 中 输 
人 锚 点 名 称 “w1” 和 “w2”, 建 立 2 个 锚 点 。 

@ 选中 网 页 文件 第 1 行 中 的 文字 “古老 民族 ”, 在 [属性] 面板 的 [链接 文本 框 中 输入 
# w2, 建 立 内 部 锚 点 链接 。 预 览 后 保存 文件 。 

@ 打开 网 页 文件 exe3-1. html, 选 中 网 页 底部 a5. gif 图 像 文 件 最 右边 的 热点 ,在 【 属 
性 了 面板 的 【链接 】 文 本 框 中 输入 literature. html # W1. 在 【目标 】 文 本 框 中 选择 【_blank]。 

@ 预览 后 观察 链接 的 效果 ,并 按 要 求 保 存 文件 。 

2) 框架 和 框架 集 的 创建 .选择 和 保存 

(1) 创建 网 页 文件 exe3-2. html, 操 作 步 骤 如 下 。 

@ 创建 一 个 名 为 exe3-2. html 的 网 页 文件 。 选 择 【 插 入 ]KHTML3K 框 架 了 区 左 侧 
及 上 方 艇 套 ] 和 选择 【插入 了 KK HTML3K 框 架 了 上 方 及 左 侧 艇 套 ] 命 令 或 单 击 【插入 了 3 栏 
的 【布局 3 选项 , 单 击 【 框 架 了 按钮 打开 下 拉 菜 单 ,再 单 击 回 和 加 按钮 .可 在 网 页 上 搬 和 人 题目 
要 求 的 两 种 框架 , 试 比较 两 种 框架 的 不 同 之 处 。 

@ 用 鼠标 拖 动 框架 线 到 框架 的 边框 ,可 删除 步 又 中 中 创建 的 框架 。 然 后 在 【 插 人 了 栏 
的 [布局 〗 选 项 中 , 单 击 【 框 架 ] 按 钮 打开 下 拉 菜 单 .再 单 击 国 按钮 ,创建 【顶部 框架 ;光标 
插 在 下 边 的 框架 中 , 单 击 加 按钮 或 按 住 Alt 键 . 拖 动 左 边 的 边框 线 , 把 【顶部 框架 3 改 为 【 顶 
部 和 髓 套 的 左 侧 框架 ,用 鼠标 拖 动 框架 线 调 整 框 架 的 大 小 。 

@ 按 住 Alt 键 并 单 击 框架 不 同 区 域 , 便 可 分 别 选中 主 框架 (Mainframe)、 左 框架 
(Leftframe) 、 顶 框架 (Topframe) 和 整个 框架 集 。 选 择 【 窗 口 3I【 框 架 3 命 令 或 按 快捷 键 
Shift 十 F2 打开 框架 面板 ,在 框架 面板 中 单 击 框架 的 不 同 区 域 ,也 可 完成 题目 要 求 。 
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(2) 按 题 目 要 求 在 网 页 文件 exe3-2. html 中 ,完成 框架 操作 ,操作 步骤 如 下 。 

Oz 将 光标 插入 到 主 框架 (Mainframe) 中 .在 【插入 了 栏 的 【布局 3 选项 中 , 单 击 【 框 架 按 
钮 打开 下 拉 菜 单 , 再 单 击 国 按钮 ,插入 框架 (BottomFrame)。 将 光标 插入 左 框 架 
(Leftframe) ,在 [插入 3 栏 的 [布局 3 选项 中 , 单 击 【 框 架 ] 按 钮 打开 下 拉 菜 单 , 再 单 击 园 按 
钮 ,将 左 框 架 分 割 成 上 (Topframel) 下 (Leftframe) 两 部 分 。 

@ 按 快捷 键 Shift 十 F2 打开 框架 面板 ,选中 如 图 3-4 所 示 的 左边 的 框架 组 ,在 【 属 
性 3 面板 中 选中 框架 组 上 边 的 (Topframel) 部 分 .设置 [ 行 ] 为 1.【 单 位 ] 为 相对 。 选 中 左边 
框架 组 下 边 的 (Leftframe) 部 分 ,设置 [ 行 3 为 80.【 单 位 ] 为 像素 。 

@ 选中 如 图 3-4 所 示 的 右边 的 框架 组 ,在 【属性 了 面板 中 选中 框架 组 上 边 的 
(Mainframe) 部 分 , 设 置 【 行 了 为 1:【 单 位 了 为 相对 。 选 中 右边 框架 组 下 边 的 
(BottomFrame) 部 分 ,设置 [ 行 ] 为 80 民 单位 3 为 像素 ,如 图 3-5 所 示 。 

@ 分 别 将 光标 插入 框架 topframe topframel .mainframe leftframe、bottomframe 5 
个 框架 内 ,选择 [修改 YI【 页 面 属性 命令 ,在 【页 面 属性 】 对 话 框 中 分 别 给 这 5 个 框架 设置 
【背景 颜色 ]# AAFFFF 、# CCFFFF、#CCFFCC、# CCFFCC 、#CCFFFF。 

G@) 选择 【文件 了 保存 全 部 1 命令 ,以 topframe、 topframel、mainframe、 leftframe、 
bottomframe 为 框架 文件 名 和 exe3-2. html 为 框架 集 名 ,将 文件 保存 在 My site 文件 
夹 中 。 


图 3-4 选择 左 , 右 框架 组 示意 图 


三 | 框架 集 边 人 E [ES 边框 圳 色 三 -| 

I 和 边框 宽度 有 
介 单位 
| 


图 3-5 框架 组 的 属性 面板 


3) 设置 框架 和 框架 集 的 属性 和 超级 链接 

(1) 按 题目 要 求 设置 框架 网 页 exe3-2. html 的 框架 集 属 性 ,操作 步骤 如 下 。 

@ 打开 exe3-2. html 框架 文件 :打开 【框架 了 面板 和 【属性 了 面板 .选中 框架 集 后 在 框架 
集 的 [属性 了 面板 中 设置 下 列 各 项 参数 .它们 分 别 为 :边框 了 为 “是 ”【 边 框 颜色 了 为 
#00CCFF 【边框 宽度 为 2 像素 .左边 【 列 了 的 值 为 200 像素 。 在 操作 中 注意 框架 【属性 】 
面板 和 框架 集 【 属 性 了 面板 的 区 别 。 
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@ 在 框架 集 【 属 性 了 面板 中 设置 5 列 了 的 单位 ,在 【单位 j 下 拉 菜 单 中 分 别 选择 【像素 】、 
【百分比 【相对 了 命令 ,观察 不 同 的 结果 。 

单 击 【插入 3 栏 的 [布局 3 选项 中 的 [绘制 层 ] 按 钮 盘 . 在 名 为 topframel 的 框架 中 夯 
一 个 大 小 为 120X160 像素 的 层 。 将 光标 插入 层 中 ,选择 [插入 YI【 表 格 3 命 令 ,在 层 中 插入 
一 个 4 行 1 列 的 表格 ,表格 为 120X160 像素 ,【 边 框 宽度 为 0 像素 。 

@ 单 击 【 插 入 3 栏 的 [常用 】 选 项 中 的 【图像 3 按钮 轿 |, 在 表格 的 4 个 单元 格 里 分 别 插入 
img 文件 夹 中 的 4 个 按钮 图 片 文 件 al. jpg、a2. jpg、a3. jpg、a4. jpg。 

@ 选中 主 框架 (Mainframe) 后 ,在 框架 [属性 ] 面 板 中 ,设置 [ 源 文件 为 html 文件 夹 
中 的 literature. html 必 滚动 3 方式 为 自动 【边界 宽度 了 为 120 像素 ;【 边 界 高 度 ] 为 30 
像素 。 

将 光标 搬入 项 框架 (Topframe) 中 : 单 击 【 搬 入 了 栏 的 【常用 选项 中 的 【FlashJ 按 钮 , 搬 
入 swf 文件 夹 中 的 Flash 文件 shu. swf。 

在 左 框 架 (Leftframe) 和 底部 框架 (Bottomframe) ,输入 题 日 中 要 求 的 文字 。 

@ 在 【属性 ] 面 板 中 分 别 为 4 个 单元 格 里 的 按钮 图 片 建立 超 链 接 , 被 链接 的 网 页 文件 
分 别 是 html 文件 夹 中 的 literature. html art. html、edu. html、scie. html, 被 链接 的 网 页 在 
主 框架 (MainFrame) 中 显示 , 即 在 【属性 了 面板 的 【目标 了 下 拉 列 表 框 中 选择 mainFrame, 如 
图 3-6 所 示 。 

@ 按 F12 键 预览 网 页 ,保存 网 页 文件 exe3-2. html。 


图 像 ，3K 宽 |120 

| 高 0 
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图 3-6 在 框架 中 建立 文本 的 超 链接 


(2) 按 题目 要 求 制作 框架 网 页 exe3-3. html, 操 作 步 又 如 下 。 

@ 创建 一 个 名 为 exe3-3. html 的 网 页 文件 。 选 择 [ 插 入 3IKHTMLI【E 框 架 3IK 下 方 
及 左 侧 在 套 ] 命 令 . 插 入 框架 。 

分 别 将 光标 插入 左 框架 、 主 框架 和 底部 框架 内 ,选择 【修改 YI【 页 面 属性 命令 ,在 
【页 面 属性 3 对 话 框 中 ,分 别 将 这 3 个 框架 的 【左边 距 3【 布 边 距 【上 边 距 】【 下 边 距 】 
设 为 0。 

选择 【文件 了 民 保 存 全 部 了 命令 .用 left. html、right. html、bott. html 为 框架 文件 名 和 
exe3-3. html 为 框架 集 名 保存 框架 文件 ,将 文件 保存 在 My site 文件 夹 中 。 

@ 打开 【框架 了 面板 和 【属性 了 面板 ,设置 左 框架 的 【 列 了 宽度 为 320 像素 .【 深 动 ] 方 式 
为 “自动 ”。 

将 光标 插入 左 框架 (Leftframe) ,选择 【修改 3】I【 页 面 属性 命令 .在 【页 面 属性 3 对 话 框 
中 ,设置 背景 图 像 为 bg0000. gif。 在 【布局 模式 3 中 , 先 绘 制 合适 的 布局 表格 , 单 击 【绘制 布 
局 单元 格 ] 了 按钮 车 .如 图 3-3 所 示 绘 制 4 个 大 小 为 103X76 像素 的 布局 单元 格 ,选择 【 插 
入 】I【 图 像 对 象 3I【 和 鼠标 经 过 图 像 ] 命 令 , 按 题 意 插入 【鼠标 经 过 图 像 】。 
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@@ 选中 框架 集 ,在 【属性 了 面板 中 设置 底 框 架 的 【 行 】 高 度 为 65 像素 。 将 光标 插 人 底 
部 框架 (Bottomframe) ,选择 【修改 了 民 页 面 属性 了 命令 ,设置 背景 颜色 为 #DDFFFF。 单 击 
【插入 3 栏 的 〖 常 用】 选项 中 的 KFlash】 按 钮 ,再 插入 swf 文件 夹 中 的 Flash 文件 camp. swf。 

@ 将 光标 插入 主 框架 (Mainframe) ,设置 背景 颜色 为 白色 。 在 网 页 合适 的 位 置 输入 
文字 “校园 景色 ”, 字 体 大 小 颜色 自 定 。 在 【布局 模式 中 , 先 绘制 合适 的 布局 表格 ,再 绘制 
1 个 大 小 为 290X220 像素 的 布局 单元 格 ,在 其 中 插入 图 像 文件 frame. gif, 在 图 像 frame. 
gif 上 面 绘制 大 小 为 269X202 的 层 ,在 层 中 插入 图 像 pl. jpg:, 预 览 网 页 后 调整 层 的 位 置 ， 
使 其 在 图 像 frame. gif 上 居中 。 

@ 选中 网 页 左 框架 (Leftframe) 第 1 个 鼠标 指针 经 过 图 像 , 在 图 像 【属性 了 面板 的 【 链 
接 ] 文 本 框 中 设置 链接 对 象 为 根 文件 夹 中 的 indexl. html., 在 【目标 了 下 拉 列 表 框 中 选择 链 
接 对 象 显示 的 框架 为 mainframe。 

@ 选中 网 页 左 框架 (Leftframe) 第 2 个 鼠标 指针 经 过 图 像 ,在 【属性 3 面板 的 [链接] 文 
本 框 中 输入 literature. html # w2, 在 【目标 J 下 拉 列 表 框 中 选择 _blank。 

@ 选中 网 页 左 框架 (Leftframe) 第 3 个 鼠标 指针 经 过 图 像 , 在 [属性] 面板 的 【链接 3 文 
本 框 中 ,输入 mailto: 十 二 E-mail 地 址 二 ,建立 E-mail 链接 。 

@ 预览 网 页 后 ,保存 全 部 框架 网 页 在 My site 文件 夹 中 。 


4. 实验 后 的 思考 题 


(1) 框架 和 框架 集 的 主要 区 别 和 各 自 的 作用 是 什么 ? 

(2) Dreamweaver 8 中 预 设 了 几 种 框架 ? 

(3) 框架 和 框架 集 的 【属性 了 面板 主要 区 别 是 什么 ? 

(4) 如 何 控制 超级 链 的 页 面 在 不 同 框架 中 显示 ? 

(5) 如 何 防止 浏览 者 在 浏览 时 用 鼠标 拖 动 框架 边框 来 改变 框架 的 大 小 ? 
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行为 与 时 间 轴 的 实验 


实验 ( 和 


1. 实验 的 目的 与 要 求 


(1) 掌握 各 种 动作 和 事件 的 使 用 方法 。 

(2) 掌握 创建 和 编辑 时 间 轴 动画 的 方法 。 

(3) 掌握 用 多 条 时 间 轴 管理 多 个 动画 的 方法 。 
(4) 熟悉 行为 和 时 间 轴 的 综合 应 用 的 方法 。 


2. 实验 的 操作 内 容 


1) 行为 的 应 用 

(1) 创建 符合 下 列 要 求 的 网 页 文件 exe4-1. html, 设 置 网 页 背景 图 像 为 bg0006. jpg， 
并 设置 其 他 必需 的 网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

Q@ 在 网 页 合适 的 位 置 插 入 一 个 层 , 层 中 插入 img 文件 夹 中 的 图 像 文 件 bird. jpg。 为 
该 层 添加 行为 ,在 响应 事件 onMouseMove 时 触发 K 拖 动 层 了 动作 。 按 F12 键 浏览 网 页 ,用 
鼠标 拖 动 图 像 观察 效果 。 

@ 为 该 层 添加 行为 ,在 响应 事件 onClick( 单 击 ) 时 触发 【播放 声音 了 动作 ,播放 wav 音 
乐 Applause. wav。 

@ 给 网 页 文件 exe4-1. html 添加 行为 ,在 响应 事件 onLoad 时 触发 【设置 状态 条 文 
本 3 动作 ,此 时 在 状态 栏 中 显示 “欢迎 访问 本 网 站 ”的 信息 。 青 给 网 页 文件 添加 行为 ,在 响 
应 事件 onLoad 时 触发 [弹出 信息 动作。 此 行为 的 功能 是 在 装载 网 页 时 ,系统 弹出 的 窗 
口中 显示 “可 用 鼠标 拖 动 图 像 1” 的 信息 。 

(2) 创建 符合 下 列 要 求 的 网 页 文件 exe4-2. html, 设 置 网 页 背景 图 像 bg0052. gif ,并 
设置 其 他 必要 的 网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

JD 网 页 中 绘制 800X600 像素 的 布局 表格 ,在 布局 表格 中 绘制 4 个 104X90 像素 的 
布局 单元 格 。 在 4 个 布局 单元 格 中 插入 鼠标 经 过 图 像 , 插 入 的 原始 图 像 文 件 为 img 文件 
夹 中 campsl.jpg、camps2. jpg、camps3. jpg、camps4. jpg, 鼠标 经 过 图 像 文件 为 该 文件 夹 
中 campl. jpg、camp2. jpg、camp3.jpg、camp4. jpg, 如 图 4-1 所 示 。 

@) 为 鼠标 经 过 图 像 添 加 行为 , 当 鼠 标 指 向 某 个 鼠标 经 过 图 像 , 图 像 翻 转 并 显示 该 图 
像 的 替换 文字 和 中 间 带 有 说 明文 字 的 图 像 , 如 图 4-2 所 示 。 说 明文 字 的 图 像 为 img 文件 
夹 中 的 文件 ml. jpg、m2. jpg、m3. jpg、m4. jpg。 


图 4-1 网 页 exe4-2. html 示意 图 一 图 4-2 网 页 exe4-2. html 示意 图 二 


@ 预览 网 页 后 ,保存 网 页 。 

(3) 创建 网 页 文件 exe4-3. html, 设 置 网 页 背景 图 像 bg0010. gif, 并 设置 其 他 必需 的 
网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

za 在 网 页 合适 的 位 置 插入 一 个 1 行 2 列 的 两 个 按钮 ,两 个 按钮 分 别 使 用 img 文件 夹 
中 的 图 像 play. jpg( 播 放 ) 和 stop. jpg( 停 止 ) 按 钮 。 在 网 页 中 搬入 swf 文件 夹 中 的 Flash 
文件 plane. swf, 如 图 4-3 所 示 。 


二 控制 F1ash 动 画 - Hicrosoft Internet Explorer[ |[ 口 |(X| 
pa 
| 文件 四 自 ”i 江 RA 击 吐 :# 志 SS (Dew 以 


图 4-3 带 控制 按钮 的 Flash 网 页 示意 图 


@ 为 按钮 添加 行为 ,使 网 页 具有 单 击 图 像 play. jpg 按钮 时 ,播放 Flash 动画 。 单 击 
图 像 stop. jpg 按钮 时 ,停止 Flash 动画 播放 。 

@ 预览 网 页 , 试 单 击 按钮 ,控制 Flash 动画 播放 后 保存 网 页 。 

(4) 创建 网 页 文件 exe4-4. html: 设 置 网 页 背景 图 像 bg0017. jpg ,并 设置 其 他 必需 的 
网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

OO 在 网 页 中 绘制 4 个 层 Layerl、Layer2、Layer3、Layer4, 在 它们 其 中 分 别 搬 入 img 
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文件 夹 中 campus16. jpg 图 像 用 Fireworks 分 割 后 的 4 个 部 分 图 像 , 如 图 4-4 所 示 。 


四 拼图 游戏 - Hicrosoft Internet Explorer 辕 回 因 
文件 四 编辑 如 查看 由 收 训 工具 CD 帮助 0 忆 


欣 图 游戏 


图 4-4 拼图 游戏 示意 图 


@ 为 每 个 层 添 加 拖 动 层 行 为 ,制作 一 个 简单 的 拼图 游戏 。 

@ 预览 网 页 , 拖 动 几 小 图 像 ,完成 拼图 后 保存 网 页 。 

(5) 创建 网 页 文件 exe4-5. html, 设 置 网 页 背景 图 像 bg0017. jpg ,并 设置 其 他 必需 的 
网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

@ 利用 行为 技术 制作 折 双 下 拉 菜 单 , 单 击 主 菜单 某 按钮 时 ,展开 它 的 下 拉 菜 单 ,双击 
某 按钮 时 , 折 秋 下 拉 菜 单 ,如 图 4-5 所 示 。 


图 4-5 折合 下 拉 菜 单 示意 图 


@ 单 击 下 拉 菜 单 的 某 按 钮 时 ,完成 超级 链接 ,被 链接 的 网 页 自 定 。 
@ 预览 网 页 后 ,将 网 页 文件 以 exe4-5. html 为 名 保存 在 My site 中 。 
(6) 打开 网 页 文件 exe2-6. html, 按 下 列 要 求 添加 行为 。 
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@D 给 网 页 左 侧 第 1 个 鼠标 经 过 图 像 添 加 行为 : 双击 该 图 像 , 停 止 页 面 底部 的 Flash 
文件 fgl. swf 播放 , 单 击 该 图 像 . 开 始 播放 页 面 底部 的 Flash 文件 fg1. swf。 

@ 给 网 页 左 侧 第 2 个 鼠标 经 过 图 像 添加 超级 链接 , 单 击 此 图 像 时 链接 网 页 文件 roll. 
html。 

@) 给 网 页 左 侧 第 3 个 鼠标 经 过 图 像 添 加 超级 链接 , 单 击 此 图 像 时 链接 到 文件 
literature. html 的 锚 点 “w1” 上 。 

@ 给 网 页 左 侧 第 4 个 鼠标 经 过 图 像 添加 行为 : 当 鼠 标 放 在 该 图 像 时 ,开始 播放 网 页 
中 间 的 Flash 文件 fg3. swf; 当 鼠 标 从 该 图 像 上 移 开 ,停止 播放 网 页 中 间 的 Flash 文件 
fg3. swf。 

@@ 预览 网 页 后 ,将 网 页 文件 以 exe4-6. html 为 名 保存 在 My site 中 。 

(7) 打开 网 页 文件 exe3-3. html, 按 下 列 要 求 添加 行为 。 

GD 对 右 框 架 网 页 right. html 稍 作 修改 。 在 插入 frame. gif 的 位 置 ,删除 图 像 文 件 
pl. jpg。 然 后 ,分 别 居中 插入 大 小 为 269 X202 像素 的 两 个 层 Layerl、Layer2 ,并 将 两 个 大 
小 一 致 的 层 人 年 放 在 一 起 。 在 两 个 层 中 分 别 插入 photo 文件 夹 内 的 图 像 文件 pl. jpg 和 
p8. jpg。 

@ 给 网 页 左 框架 中 第 1 个 鼠标 经 过 图 像 添加 行为 。 当 鼠标 指向 该 图 像 时 显示 层 
Layerl, 此 时 可 以 看 到 图 像 文件 pl. jpg; 当 鼠标 从 该 图 像 上 移 开 时 ,隐藏 屋 Layerl。 单 击 
网 页 左 侧 第 1 个 鼠标 经 过 图 像 ,在 主 框 架 中 显示 被 链接 的 网 站 相册 文件 indexl. html。 

@ 给 网 页 左 框架 中 第 2 个 鼠标 经 过 图 像 添加 行为 。 当 鼠标 指向 该 图 像 时 显示 层 
Layer2 ,此 时 可 以 看 到 图 像 文件 p8. jpg; 当 鼠标 从 该 图 像 上 移 开 时 ,隐藏 层 Layer2。 单 击 
网 页 左 侧 第 2 个 鼠标 经 过 图 像 .在 新 的 浏览 窗口 中 显示 被 链接 的 网 页 。 被 链接 的 对 象 为 
literature. html 文件 中 的 锚 点 wl。 

@ 给 网 页 左 框架 中 第 3 个 鼠标 经 过 图 像 添 加 行为 。 双 击 该 图 像 ,停止 播放 底部 框架 
页 面 的 Flash 文件 camp. swf, 单 击 该 图 像 .开始 播放 底部 框架 页 面 的 Flash 文件 
camp. swf。 

@ 给 网 页 左 框架 中 第 4 个 鼠标 经 过 图 像 添加 超 链接 。 单 击 该 图 像 ,启动 邮件 发 送 程 
序 ,E-mail 地 址 为 读者 本 人 的 邮箱 地 址 。 

@ 网 页 被 浏览 时 ,在 浏览 器 的 状态 栏 中 显示 文字 “欢迎 浏览 本 网 页 1”。 

@ 预览 网 页 后 ,将 网 页 文件 以 exe4-7. html 为 名 保存 在 My site 中 。 

2) 时 间 轴 动画 的 制作 

(1) 创建 网 页 文件 exe4-8. html, 设 置 网 页 背景 图 像 bg0006. jpg, 并 设置 其 他 必需 的 
网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

JD 在 网 页 合适 的 位 置 绘制 4 个 层 , 在 其 中 分 别 插入 img 文件 夹 中 的 图 像 文件 
campl. jpg、camp2. jpg、camp3. jpg、camp4. jpg: 并 将 这 4 个 层 生 放 在 一 起 。 

@ 用 时 间 轴 控制 层 的 显示 次 序 , 每 过 半 秒 钟 显示 一 幅 层 中 的 图 像 。 一 个 循环 依次 显 
示 这 4 幅 图 像 ,循环 5 次 后 停止 。 

@@ 保存 文件 后 ,预览 页 面 观察 效果 。 

(2) 创建 网 页 文件 exe4-9. html, 设 置 网 页 背景 图 像 bg0006. jpg, 并 设置 其 他 必需 的 
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网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

@ 在 网 页 合适 的 位 置 插入 一 个 层 , 层 中 插入 img 文件 夹 中 的 图 像 文件 email. gif。 创 
建 时 间 轴 动画 ,动画 运动 轨迹 为 一 条 水 平 直线 .并 设置 每 秒 播放 20 帧 ,自动 循环 播放 , 动 
画 条 长 度 为 50 帧 ,预览 页 面 观察 效果 。 

@) 在 题 时 间 轴 动画 条 的 第 10、20、30、40、50 帧 插入 关键 帧 ,然后 用 鼠标 拖 动 该 层 ， 
改变 关键 帧 的 动画 轨迹 , 即 动画 轨迹 由 原来 直线 轨迹 变 为 波浪 线 轨迹 ,预览 页 面 效果 。 

@ 在 题 @ 时 间 轴 动画 条 的 第 10 到 20 帧 和 第 30 到 40 帧 隐藏 层 。 在 第 5 帧 插入 关键 
帧 ,并 为 该 由 添加 行为 :在 响应 事件 onFrame5( 即 动画 运行 到 第 5 帧 时 ) 时 触发 播放 声音 
的 动作 ,播放 wav 声音 Appluase. wav, 预 览 页 面 观察 效果 。 

@ 在 网 页 的 合适 位 置 插入 一 个 层 , 层 中 插入 鼠标 经 过 图 像 , 原始 图 像 和 鼠标 经 过 图 
像 分 别 为 文件 夹 img 中 的 Play. jpg 和 Stop. jpg。 网 页 具有 下 列 功能 。 

。 当 用 鼠标 单 击 Play 按钮 时 ,此 按钮 翻转 成 Stop 按钮 ,此 时 时 间 轴 动画 开始 沿 轨 

迹 运动 。 

。 当 用 鼠标 双击 Stop 按钮 时 ,Stop 按钮 翻转 成 Play 按钮 ,时 间 轴 动画 停止 运动 。 

@ 预览 网 页 后 ,以 exe4-9. html 为 名 将 文件 保存 在 文件 夹 My site 中 。 

(3) 打开 网 页 文件 exe4-9. html, 按 下 列 要 求 修改 网 页 ,并 将 修改 后 的 网 页 以 exe4- 
10. html 为 名 保存 在 本 地 站 点 My site 中 。 

Oz 在 网 页 的 右边 合适 位 置 插入 一 个 层 , 层 中 插入 img 文件 夹 中 图 像 文件 bird. gif。 

@ 在 网 页 中 再 增加 一 条 时 间 轴 动画 条 .控制 新 插入 图 像 的 运动 轨迹 ,如 图 4-6 所 示 ， 
预览 网 页 后 ,以 exe4-10. html 为 名 保存 文件 。 


esultd\exed—10. htal 《XHTBEL)》 


[aa Cara [W]e QA Jor vl 0rv a7 


图 4-6 两 条 时 间 轴 动画 的 示意 图 


实验 4 行为 与 时 间 轴 的 实验 EE 


(4) 创建 符合 下 列 要 求 的 网 页 文件 exe4-11. html, 设 置 网 页 背景 图 像 bg0006. jpg ,并 
设置 其 他 必需 的 网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

QO@ 绘制 800X600 像素 的 布局 表格 ,并 在 合适 的 位 置 绘制 520X220 像素 的 布局 单元 
格 。 在 布局 单元 格 中 .插入 img 文件 夹 中 的 圆 角 和 矩形 框 的 图 像 文 件 bg. gif, 如 图 4-7 
所 示 。 


“少年 读书 ， 如 障 间 疯 月 ;中 年 读书 ， 如 庭 中 望月 ， 老 年 读书 ， 如 台 上 玩 月 。 


以 阅历 之 法 深 ， 为 所 得 之 法 深 耳 
1 ,二 “有 功夫 窟 区 。 请 之 福 ， 有 为 生 注 人 。 刘 之 福 ， 有 学 问 等 述 ， 谓 之 福 ， 无 是 非 
” ¢ bE 2 论 看 为 准 ; 看 书 不 礁 ， 能 访 为 难 ， 该 书 不 难 ， 能 用 为 难 ， 能 用 不 


图 4-7 滚动 文字 网 页 的 示意 图 


@ 创建 层 Layerl 和 Layer2 ,设置 Layer2 为 Layerl 的 子 层 , 将 Layerl 覆盖 在 圆 角 
和 矩形 框 的 图 像 文 件 中 ,并 将 book. doc 中 文字 复制 到 Layer2 中 。 

@ 利用 层 和 时 间 轴 技术 制作 滚动 文字 的 网 页 滚动 文字 在 圆 角 和 矩形 的 框 内 由 下 而 上 
徐徐 滚动 。 

@ 预览 网 页 后 ,以 exe4-11. html 为 名 保存 文件 。 


3. 实验 的 参考 步骤 


1) 行为 的 应 用 

(1) 按 题目 要 求 创建 网 页 文件 exe4-1. html, 操 作 步 又 如 下 。 

| 将 本 章 素 材 文 件 夹 中 的 素材 复制 到 文件 夹 My site 中 ,并 将 其 设 为 本 地 站 点 。 

@ 新 建 一 个 页 面 ,选择 【修改 了 民 页 面 属性 了 命令 ,在 【页 面 属 性 对话 框 中 设置 背景 图 
像 为 bg0006. jpg ,将 【左边 距 3 工 右边 距 3【 上 边 距 【下 边 距 3 分 别 设 置 为 0, 其 他 参数 默 
认 ,然后 单 击 〖 确 定 3 按 钮 确认 ,并 将 网 页 以 exa4-1. html 为 名 保存 在 My site 文件 夹 中 。 

@ 在 网 页 合适 的 位 置 插入 一 个 层 , 层 中 插入 img 文件 夹 中 的 图 像 文件 bird. jpg, 调 
整 层 的 大 小 。 

@ 选择 【窗口 3 代行 为 命令 ,打开 【行为 了 面板 ,在 层 选中 状态 下 , 单 击 【 添 加 行为 了 按 
钮 划 | .在 【动作 了 莱 单 中 选择 【 拖 动 层 ] 命 令 ,在 【事件 了 菜单 中 选择 onMouseMove 命令 (可 
先 选择 [显示 事件 3IKIE 6. 0 将 事件 全 部 显示 出 来 ) ,使 得 在 浏览 该 页 面 时 ,能 随意 拖 动 插 
入 图 像 bird. jpg 的 层 。 

@@ 单 击 【 添 加 行为 ] 按 钮 .和 ,选择 【播放 声音 动作 ,在 弹出 的 [播放 声音 对 话 框 中 输 
入 文件 夹 music 中 的 声音 文件 Appluase. wav, 并 单 击 【 确 定 3 按 钮 确认 ,在 【事件 菜单 中 
选择 onClick 命令 。 
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@ 单 击 【 添 加 行为 按钮 芭 . 在 【动作 3] 荣 单 中 选择 【设置 文本 了 民 设 置 状 态 栏 文本 1 命 
令 ,在 弹出 的 【5 设置 状态 栏 文本 对话 框 中 输入 文字 "欢迎 访问 本 网 站 ”, 并 单 击 【确定 3 按钮 
确认 ,在 [事件] 训 单 中 选择 onLoad 命令 (不 选中 网 页 中 对 象 时 添加 本 行为 ) 。 

Q@ 单 击 【添加 行为 了 按钮 芭 , 在 【动作 了 荣 单 中 选择 【弹出 信息 3 命令 ,在 【弹出 信息 了 对 
话 框 中 输入 "可 用 鼠标 拖 动 图 像 !”, 并 单 击 【确定 了 按钮 确认 ,在 【事件 了 荣 单 中 选择 onLoad 
命令 (不 选中 网 页 中 对 象 时 添加 本 行为 ) 。 

@ 保存 当前 网 页 后 , 按 F12 键 浏览 该 页 面 。 

(2) 按 题目 要 求 创 建 网 页 文件 exe4-2. html, 操 作 步 又 如 下 。 

@ 创建 网 页 文件 exe4-2. html ,选择 【修改 了 民 页 面 属 性 了 命令 ,设置 网 页 背景 图 像 为 
bg0017. gif 。 

@ 单 击 【 搬 入 了 栏 的 【布局 3 选项 中 的 【布局 模式 了 按钮 ,将 网 页 编辑 方式 切换 成 【布局 
视图 模式 。 单 击 【 布 局 表格 按钮 是 .在 网 页 中 绘制 800X 600 像素 的 布局 表格 。 再 单 击 
【布局 单元 格 ] 按 钮 墅 ,绘制 4 个 104X90 像素 的 布局 单元 格 ,图 4-1 所 示 。 

G@ 选择 [插入 了 区 图 像 对 象 了 民 鼠 标 经 过 图 像 】 命 令 ,在 图 4-1 所 示 的 4 个 布局 单元 格 
中 插入 img 文件 夹 中 的 原始 图 像 文 件 campsl. jpg、camps2. jpg、camps3. jpg、camps4. jpg 
和 鼠标 经 过 图 像 文 件 campl. jpg camp2. jpg、camp3. jpg、camp4. jpg。 

@ 分 别 选 中 4 个 鼠标 经 过 图 像 ,在 【属性 了 面板 的 【 蔡 代 了 文本 框 中 ,输入 [鼠标 经 过 
像 3 的 替代 文字 “东风 楼 ?”“ 小 白 楼 "“ 交 谊 楼”“ 办 公 楼 ”。 

在 网 页 正中 间 的 单元 格 中 插入 层 Layerl、Layer2、Layer3、Layer4 ,并 在 4 个 层 中 
分 别 插入 img 文件 夹 中 的 文件 ml. jpg、m2. jpg、m3. jpg、m4. jpg。 将 4 个 层 秋 放 在 布局 
单元 格 正 中 间 的 位 置 ,如 图 4-1 所 示 。 按 F2 键 打开 【 层 了 面板, 设置 4 个 层 为 不 可 见 ( 单 击 
“可 视 标记 一 一 睁 眼 ” 改 为 “不 可 视 标 记 一 一 闭 眼 ”)。 

@ 选择 [窗口 【行为 3 命令 ,打开 [行为 ] 面 板 , 选 中 图 像 camps3. jpg( 右 边 的 鼠标 经 
过 图 像 ), 单 击 . 志 | 按钮 ,选择 【显示 -隐藏 层 ] 命 令 ,隐藏 带 有 说 明文 字 的 4 个 层 , 如 图 4-8 所 
示 。 在 【事件 了 荣 单 中 选择 onMouseOut 命令 ,表示 当 鼠 标 从 鼠标 经 过 图 像 上 移 开 时 ,正中 
间 的 单元 格 中 的 4 个 层 都 隐藏 起 来 ,其 中 的 说 明文 字 图 像 都 不 显示 。 


图 4-8 在 【显示 -隐藏 层 ] 对 话 框 中 设置 隐藏 层 


@ 再 给 该 图 添加 行为 ,在 【动作 订单 中 选择 【显示 -隐藏 层 ] 命 令 , 显 示 带 有 该 图 说 明 
文字 的 层 Layer3 ,隐藏 其 他 3 个 层 。 在 【事件 3 菜单 中 选择 onMouseOver 命令 ,如 图 4-9 
所 示 。 

@@ 按 Fl12 键 浏览 网 页 ,用 鼠标 指向 右边 的 鼠标 经 过 图 像 camps3. jpg; 出 现 如 图 4-2 
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图 4-9 在 【显示 -隐藏 层 ] 对 话 框 中 设置 显示 层 Layer3 属性 


所 示 的 页 面 , 然 后 再 移 开 鼠标 ,观察 变化 的 结果 ,并 保存 网 页 文件 。 

用 同样 的 方法 ,设置 其 他 3 个 层 的 属性 ,操作 略 。 

G@ 保存 当前 网 页 后 , 按 F12 键 浏览 该 页 面 。 

(3) 按 题目 要 求 创建 网 页 文件 exe4-3. html, 操 作 步 又 如 下 。 

@ 创建 网 页 文件 exe4-3. html, 设 置 网 页 背景 图 像 为 bg0010. gif, 并 设置 其 他 必需 的 
网 页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

@) 选择 【 插 人 了 区 表格 了 命令 ,在 网 页 合适 的 位 置 插入 1 行 3 列 的 表格 ,表格 的 每 个 单 
元 格 为 100X30 像素 。 单 击 【 插 入 3 栏 的 [常用 选项 中 的 [图 像 ] 按 钮 图 ,在 表格 中 分 别 插 
入 img 文件 夹 中 的 图 像 play. jpg( 播 放 ) 和 stop. jpg( 停 止 ) 按 钮 。 

@ 在 网 页 合适 的 位 置 插入 一 个 550 X400 像素 的 层 ( 插 入 层 是 为 了 便于 调整 flash 位 
置 ) , 单 击 【搬入 3 栏 的 [常用 选项 中 的 【Flash] 按 钮 鳞 . 在 层 中 插入 swf 文件 夹 中 的 flash 
文件 plane. swf。 

@ 选中 flash 文件 ,在 【属性 了 面板 中 设置 flash 文件 的 名 字 为 plane, 并 将 【循环 】 和 
【自动 播放 3 两 个 复 选 框 设置 成 不 选中 状态 。 

@@ 选中 按钮 图 像 play. jpg, 在 【行为 了 面板 中 单 击 卉 按钮 ,为 选中 的 按钮 图 像 添 加 行 
为 。 在 【动作 了 荣 单 中 选择 【控制 Shockwave 或 Flash] 命 令 ,在 弹出 的 【控制 Shockwave 或 
Flash】 对 话 框 中 设置 [操作 3 的 单 选 按钮 为 【播放 】, 如 图 4-10 所 示 。 在 【事件 菜单 中 选择 
onClick 命令 。 这 个 行为 表示 当 用 鼠标 单 击 “play” 按 钮 时 ,开始 播放 名 为 plane 的 Flash 
动画 。 


控制 Shockwave 或 Flash 


图 4-10 设置 Flash 播放 参数 的 对 话 框 


用 同样 的 方法 可 以 设置 “stop” 按 钮 的 [停止 7 功能 。 

人) 预览 网 页 后 ,以 exe4-3. html 为 名 将 文件 保存 在 文件 夹 My site 中 。 

(4) 按 题目 要 求 创 建 网 页 文件 exe4-4. html, 操 作 步 又 如 下 。 

Oz 创建 网 页 文件 exe4-4. html, 设 置 网 页 背景 图 像 bg0017. jpg, 并 设置 其 他 必需 的 网 
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页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 
@ 在 网 页 中 插入 4 个 层 Layerl、Layer2、Layer3、Layer4 中 ,分 别 插入 campus16. jpg 
图 像 分 割 后 的 4 个 部 分 ,该 图 像 可 在 Fireworks 用 切片 的 方法 分 割 或 直接 用 img 文件 夹 
中 分 割 好 的 图 像 。 
图 选择 [窗口 3 代行 为 了 命令 ,打开 【行为 了 面板 ,在 层 未 选中 状态 下 , 单 击 到 | 按钮 ,为 
层 添 加 行为 ,在 【动作 ] 麻 单 中 选择 【 拖 动 层 3 命 令 。 在 【 拖 动 层 3 对 话 框 中 设置 图 4-11 所 示 
的 参数 ,对 话 框 中 参数 意义 如 下 。 
。 在 【〖 层 J 下拉 列 表 框 中 选择 要 设置 行为 的 层 , 先 选择 层 Layerl 。 
。 在 【移动 3 下 拉 列 表 框 中 指定 层 拖 动 的 类 型 【不 限制 3 选项 是 设置 该 层 可 以 自由 拖 
动 :限制 〗 选 项 是 设置 该 层 要 受到 一 定 约束 。 在 本 例 中 希望 能 用 鼠标 自由 拖 动 
层 , 故 选择 [不 限制 〗 选 项。 
*。【 放 下 目标】 文本 框 用 于 设置 当前 层 放置 的 终点 坐标 , 若 不 明确 当前 层 的 坐标 位 
置 , 可 单 击 【 取 得 目前 位 置 了 按钮 ,直接 得 到 当前 层 的 坐标 位 置 数值 。 
。 在 【 靠 齐 距离 了 文本 框 中 输入 的 是 层 位置 与 终点 的 坐标 距离 的 自动 匹配 值 。 用 鼠 
标 移 动 层 时 ,该 层 与 终点 坐标 的 距离 小 于 指定 的 数值 , 层 会 自动 调整 到 终点 的 坐 
标 位 置 。 本 例 , 这 个 距离 被 设置 为 80 像素 。 
。 单 击 【确定 了 按钮 确认 【 拖 动 层 3 动 作 的 设置 ,并 选择 事件 onMouseMove。 这 个 行 
为 表示 在 响应 事件 onMouseMove( 鼠 标 移 动 ) 时 触发 【 拖 动 层 3 的 动作 。 


层 “Layerl” 
动 ; | 不 限制 国 | 


左 ; E98 ”|] 上 : EE4 || 职 得 目前 位 置 
Bo 像素 接近 放下 目标 


图 4-11 【〖 拖 动 层 ] 对 话 框 示意 图 


@ 用 同样 的 方法 设置 层 Layer2、Layer3、Layer4. 便 可 完成 拼图 游戏 的 制作 ,如 图 4-5 
所 示 。 将 文件 以 exe4-4. html 为 名 保存 在 My site 文件 夹 中 。 

(5) 按 题目 要 求 创 建 网 页 文件 exe4-5. html, 操 作 步 又 如 下 。 

制作 说 明 : 

主 菜单 共有 5 个 按钮 ,每 个 按钮 都 有 自己 的 下 拉 式 菜单 , 单 击 某 个 按钮 ,展开 这 个 按 
钮 的 下 拉 式 菜单 ;双击 这 个 按钮 ,该 按钮 的 下 拉 式 菜单 就 折 胎 起 来 。 

创建 6 个 层 , 第 1 个 层 插 入 5 个 按钮 ( 即 主 菜单 ), 其 他 5 个 层 中 分 别 插入 5 个 按钮 被 
单 击 后 展开 的 下 拉 式 菜单 及 主 菜单 的 按钮 。6 个 层 登 放 在 一 起 .初始 状态 只 显示 插入 主 
菜单 按钮 的 层 , 其 他 层 设置 为 不 可 见 。 当 主 菜 单 中 某 个 按钮 被 单 击 后 ,只 需 隐 藏 主 菜单 的 
层 , 显 示 插 入 该 按钮 下 拉 式 菜单 的 层 即 可 ; 当 该 按钮 被 双击 后 ,只 需 隐藏 插入 该 按钮 下 拉 
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式 菜单 的 层 , 显 示 主 菜单 的 层 即 可 。 

创建 网 页 文件 exe4-5. html, 设 置 网 页 背景 图 像 bg0017. jpg, 并 设置 其 他 必需 的 网 
页 属性 后 ,将 网 页 保存 在 本 地 站 点 My site 中 。 

@ 以 制作 下 拉 式 菜单 “现代 文学 ?为 例 , 如 图 4-5 所 示 。 

创建 插入 主 菜单 按钮 的 层 menu。 单 击 【 插 入 3 栏 的 【布局 3 选项 中 的 【绘制 层 ] 按 钮 ， 
在 网 页 合适 的 位 置 插入 1 个 层 , 在 层 的 【属性 了 面板 中 设置 【 左 3 为 30 像素 【上 为 20 像 
素 【 宽 ] 为 100 像素 【高 为 175 像素 ,并 在 【 层 编 号 了 文本 框 中 输入 层 名 : menu。 

@) 选择 【插入 了 区 表格 了 命令 ,在 层 menu 中 搬入 一 个 5 行 1 列 的 表格 ,表格 的 每 个 单 
元 格 为 120X35 像素 。 单 击 【 搬 入 了 栏 的 [常用 选项 中 的 【图 像 3 按 钮 ,在 5 个 单元 格 中 分 
别 插 入 文件 夹 button 中 的 al.jpg\a2.jpg、……、a5.jpg。 

@ 创建 插入 “现代 文学 ”下 拉 式 菜单 按钮 的 层 Layerl ,在 【属性 了 面板 中 设置 【 左 3 为 
30 像素 【上 了】 为 20 像素 【 宽 ] 为 100 像素 【高 ] 为 315 像素 。 选 择 [ 插 入 YI【 表 格 ] 命 令 ， 
插入 9 行 1 列 的 表格 ,每 个 单元 格 为 120X35 像素 。9 个 单元 格 中 分 别 插 入 button 文件 
中 的 al. jpg、all. jpg、al2. jpg、al3. jpg、al4. jpg、a2. jpg、a3. jpg、a4. jpg、a5. jpg 图 像 文件 。 

@@ 选中 层 menu 中 现代 文学 ”的 按钮 图 像 ,在 【行为 了 面板 中 单 击 到 按钮 ,为 选中 的 
按钮 图 像 添 加 行为 。 在 【动作 了 菜单 中 选择 【显示 -隐藏 层 ] 命 令 ,在 弹出 的 【显示 -隐藏 层 〗 
对 话 框 中 设置 显示 层 Layerl ,隐藏 其 他 层 。 在 【事件 了 菜单 中 选择 onClick 命令 。 这 个 行 
为 表示 当 单 击 “ 现 代 文 学 ”的 按钮 时 ,显示 该 按钮 所 对 应 的 下 拉 式 菜单 ( 即 层 Layerl 的 内 
容 )。 

@O 选中 层 Layerl 中 “现代 文学 ”的 按钮 图 像 ,在 【行为 了 面板 中 单 击 型 按 钮 ,为 选中 的 
按钮 图 像 添加 行为 。 在 【动作 了 荣 单 中 选择 【显示 -隐藏 层 ] 命 令 , 并 在 弹出 的 【显示 -隐藏 
层 〗 对 话 框 中 设置 显示 层 menu, 隐 藏 其 他 层 。 在 事件 菜单 中 选择 onDblClick 命令 。 这 个 
行为 表示 当 双 击 “ 现 代 文 学 ”的 按钮 时 ,显示 主 菜单 ( 即 层 menu 的 内 容 ) 。 

@;@ 将 这 两 个 层 著 放 在 一 起 ,在 层面 板 中 设置 层 Layerl 初始 状态 为 不 可 见 。 

@ 用 同样 的 方法 为 其 他 按钮 添加 行为 。 

@ 单 击 下 拉 菜 单 的 某 按钮 时 ,完成 超级 链接 ,被 链接 的 网 页 自 定 。 

@ 预览 网 页 后 ,网 页 文件 以 exe4-5. html 为 名 保存 在 My site 中 。 

(6) 按 题目 要 求 给 网 页 文件 exe2-6. html 添加 行为 ,操作 步骤 如 下 。 

Q@ 打开 网 页 文件 exe2-6. html, 选 中 页 面 底部 的 Flash 文件 fgl. swf, 在 【属性 了 面板 
中 设置 Flash 文件 的 名 字 为 fgl, 并 将 【循环 3 和 【自动 播放 两 个 复 选 框 设 置 成 不 选中 
状态 。 

@ 选中 网 页 左 侧 第 1 个 鼠标 经 过 图 像 ,在 【行为 了 面板 中 单 击 到 按钮 ,为 选中 的 图 像 
添加 行为 。 在 【动作 菜单 中 选择 【控制 Shockwave 或 Flash 命令, 在 弹出 的 【控制 
Shockwave 或 Flash】 对 话 框 中 设置 【动作 的 单 选 按 钮 为 【播放 】。 在 【事件 菜单 中 选择 
onClick 命令 。 这 个 行为 表示 当 单 击 该 图 像 时 :开始 播放 页 面 底部 的 Flash 文件 fg1. swf。 

@ 再 给 该 图 添加 行为 ,在 【动作 了 莱 单 中 选择 【控制 Shockwave 或 Flash 命令 ,在 弹出 
的 【控制 Shockwave 或 Flash】 对 话 框 中 设置 【动作 的 单 选 按钮 为 【停止 3]。 在 【事件 3 菜单 
中 选择 onDblClick 命令 。 这 个 行为 表示 当 双 击 该 图 像 时 :停止 页 面 底部 的 Flash 文件 
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fgl. swf。 

@ 选中 网 页 左 侧 第 2 个 鼠标 经 过 图 像 ,在 【属性 了 面板 中 建立 与 网 页 文件 roll. html 
的 链接 。 

@@ 选中 网 页 左 侧 第 3 个 鼠标 经 过 图 像 .在 【属性 了 面板 的 【链接 了 文本 框 中 输入 html/ 
literature. htm# wl, 

@ 选中 网 页 中 间 的 Flash 文件 fg3. swf, 在 【属性 了 面板 中 设置 flash 文件 的 名 字 为 
fg3 ,并 将 【循环 了 和 【自动 播放 了 两 个 复 选 框 设置 成 不 选中 状态 。 

@ 选中 网 页 左 侧 第 4 个 鼠标 经 过 图 像 ,在 【行为 了 面板 中 单 击 型 按钮 ,为 选中 的 图 像 
添加 行为 。 在 【动作 菜单 中 选择 【控制 Shockwave 或 FlashJ 人 命令, 在 弹出 的 【控制 
Shockwave 或 Flash】 对 话 框 中 设置 [动作 的 单 选 按钮 为 【播放 】。 在 【事件 菜单 中 选择 
onMouseOver 命令 。 这 个 行为 表示 当 鼠 标 指针 放 在 该 图 像 时 ,开始 播放 网 页 中 间 的 
Flash 文件 fg3. swf。 

@@ 选中 网 页 左 侧 第 4 个 鼠标 经 过 图 像 ,在 【行为 了 面板 中 单 击 到 | 按钮 ,为 选中 的 图 像 
添加 行为 。 在 【动作 菜单 中 选择 【控制 Shockwave 或 Flash 命 令 , 在 弹出 的 【控制 
Shockwave 或 Flash] 对 话 框 中 设置 【动作 了 的 单 选 按钮 为 【停止 3]。 在 【事件 了 荣 单 中 选择 
onMouseOut 命令 。 这 个 行为 表示 当 鼠 标 从 该 图 像 上 移 开 ,停止 播放 网 页 中 间 的 Flash 
文件 fg3. swf。 

G) 预览 网 页 后 ,将 网 页 文件 以 exe4-6. html 为 名 保存 在 My site 中 。 

(7) 按 题目 要 求 给 网 页 文件 exe3-3. html 添加 行为 ,操作 步骤 如 下 。 

G@ 打开 网 页 文件 exe3-3. html, 删 除 右 框 架 网 页 right. html 中 的 图 像 文 件 pl. jpg。 

@ 在 图 像 frame. gif 的 位 置 ,居中 绘制 大 小 为 269 x 202 像素 的 两 个 层 Layerl、 
Layer2, 并 将 两 个 大 小 一 致 的 层 释 放 在 一 起 ,在 两 个 层 中 分 别 插入 photo 文件 夹 内 的 图 像 
文件 pl. jpg 和 p8.jpg', 在 【 层 了 面板 中 设置 两 个 层 为 不 可 见 。 

@ 选中 网 页 左 框架 第 1 个 鼠标 经 过 图 像 ,在 [行为] 面板 中 单 击 . 和 按钮 ,为 选中 的 图 
像 添加 行为 。 在 【动作 了 荣 单 中 选择 【显示 -隐藏 层 ] 命 令 , 显 示 Layerl ,隐藏 Layer2, 在 【 事 
件 了 菜单 中 选择 onMouseOver 命令 。 

再 给 该 图 添加 行为 ,在 【动作 菜单 中 选择 【显示 -隐藏 层 命 令 , 隐藏 Layerl 和 
Layer2 .在 【事件 了 荣 单 中 选择 onMouseOnut 命令 。 

@ 选中 网 页 左 框架 第 2 个 鼠标 经 过 图 像 ,在 【行为 了 面板 中 单 击 到 | 按钮 ,为 选中 的 图 
像 添 加 行为 。 在 【动作 3 莱 单 中 选择 【显示 -隐藏 层 】 命 令 . 显示 Layer2 ,隐藏 Layerl ,在 【 事 
件 3 菜 单 中 选择 onMouseOver 命令 。 

再 给 该 图 添加 行为 ,在 【动作 菜单 中 选择 【显示 -隐藏 层 ] 命 令 , 隐藏 Layerl 和 
Layer2 ,在 【事件 了 荣 单 中 选择 onMouseOut 命令 。 

@ 选中 网 页 底部 的 Flash 文件 camp. swf., 在 【属性 了 面板 中 设置 Flash 文件 的 名 字 为 
camp ,并 将 【循环 了 和 区 自动 播放 了 两 个 复 选 框 设 置 成 不 选中 状态 。 

选中 网 页 左 侧 第 3 个 鼠标 经 过 图 像 ,在 【行为 了 面板 中 单 击 到 按钮 ,为 选中 的 图 像 添 
加 行为 。 在 【动作 菜单 中 选择 【控制 Shockwave 或 Flash3 命 令 , 在 弹出 的 【控制 
Shockwave 或 Flash】 对 话 框 中 设置 【动作 的 单 选 按 钮 为 【播放 】。 在 【事件 菜单 中 选择 
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onClick 命令 。 这 个 行为 表示 当 单 击 该 图 像 时 ,开始 播放 页 面 底部 的 Flash 文件 
camp. swf。 

再 给 该 图 添加 行为 ,在 【动作 卫 单 中 选择 【控制 Shockwave 或 Flash] 命 令 ,在 弹出 的 
【控制 Shockwave 或 Flash] 对 话 框 中 设置 【5 动作 了 的 单 选 按钮 为 【停止 ]。 在 【事件 了 菜单 中 
选择 onDblClick 命令 。 这 个 行为 表示 当 双 击 该 图 像 时 .停止 页 面 底部 的 Flash 文件 
camp. swf。 

@ 选中 网 页 左 侧 第 4 个 鼠标 经 过 图 像 添 加 邮件 链接 ,在 【行为 3 面板 中 单 击 型 按 钮 , 
并 在 【动作 3 莱 单 中 选择 【设置 文本 了 区 设 置 状 态 栏 文本 3 命令 ,在 弹出 的 【设置 状态 条 文本 了 
对 话 框 中 输入 文字 “欢迎 浏览 本 网 页 1” 并 确认 ,在 【事件 麻 单 中 选择 onLoad 命令 。 

@ 预览 网 页 后 ,将 网 页 文件 以 exe4-7. html 为 名 保存 在 My site 中 。 

2) 时 间 轴 动画 的 制作 

(1) 按 题目 要 求 创建 网 页 文件 exe4-8. html, 操 作 步 又 如 下 。 

制作 说 明 : 

本 题 的 制作 方法 有 以 下 几 种 : 

。 可 在 Fireworks 用 制作 逐 帧 动画 的 方法 ,完成 图 像 的 交替 显示 。 

。 在 时 间 轴 的 关键 帧 处 改变 图 像 的 路 径 和 文件 名 ,达到 控制 图 像 的 替换 的 目的 。 

。 在 时 间 轴 的 关键 帧 处 改变 插入 图 像 层 的 登 放 次 序 , 达 到 控制 图 像 的 替换 的 目的 。 

。 本 题 的 制作 方法 是 在 时 间 轴 的 关键 帧 处 插入 改变 层 的 可 见 性 的 行为 ,达到 控制 图 

像 的 替换 的 目的 。 

@ 创建 网 页 文件 exe4-8. html, 在 合适 的 位 置 新 建 四 个 层 Layerl、Layer2、Layer3 、 
Layer4。 分 别 将 文件 夹 img 中 图 像 文件 campl. jpg、camp2. jpg、camp3. jpg、camp4. jpg 
插入 这 4 个 层 , 并 设置 4 个 位 置 相同 的 层 , 并 将 它们 秋 放 在 一 起 。 

@ 选择 [窗口 IIK 时 间 轴 命令 ,打开 【时 间 轴 面板。 分 别 选中 4 个 层 , 单 击 【 时 间 轴 】 
面板 右边 的 国 按 钮 ,选择 【添加 对 象 ] 命 令 .创建 4 条 时 间 轴 动画 条 ,每 条 动画 条 的 长 度 为 
10 帧 ,并 在 FFps] 文 本 框 中 输入 20( 表 示 每 秒 播放 20 帧 ), 选 中 【自动 播放 了 和 【循环 】 复 
选 框 。 

@ 由 题 意 可 知 , 网 页 要 完成 的 功能 是 每 次 只 显示 1 幅 图 像 ,4 幅 图 像 轮流 显示 。 因 此 
在 关键 帧 位 置 要 设置 层 的 可 见 性 。 选 中 第 1 帧 ,在 【行为 了 面板 中 , 单 击 弄 | 按钮 为 该 帧 添 
加 行为 。 在 【动作 了 生 单 中 选择 【显示 -隐藏 层 了 命令 .并 在 弹出 的 【显示 -隐藏 层 ] 对 话 框 中 
设置 显示 层 Layerl、 隐 藏 层 Layer2、Layer3、Layer4 .选择 默认 的 事件 onFramel 。 

这 个 行为 表示 在 动画 运行 到 第 1 帧 处 ,触发 显示 -隐藏 层 了 的 动作 ,显示 层 Layerl , 隐 
藏 其 他 层 。 

@ 用 同样 的 方法 在 第 11、21、31 帧 处 分 别 设 置 显 示 层 Layer2、Layer3、Layer4 ,隐藏 
其 他 层 的 行为 。 

@@ 选中 第 41 帧 ,在 【行为 了 面板 中 双击 该 帧 的 行为 ,系统 弹出 【 转 到 时 间 轴 帧 3 对 话 
框 ,在 【 转 到 帧 】 文 本 框 中 输入 1. 表 示 转 到 第 1 帧 ;在 【循环 】 文 本 框 中 输入 5, 表 示 循 环 5 
次 。 利 用 [ 转 到 时 间 轴 帧 行为 ,可 以 实现 直接 跳 转 到 时 间 轴 动画 的 第 1 帧 所 在 的 位 置 。 

@ 按 Fl12 键 预览 网 页 ,此 时 4 幅 图 像 如 幻灯 片 方式 交替 轮流 显示 ,保存 网 页 。 
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(2) 按 题 目 要 求 创建 网 页 文件 exe4-9. html, 操 作 步 又 如 下 。 

za 创建 网 页 文件 exe4-9. html, 选 择 〖 修 改 YI【 页 面 属性 3 命令 .设置 背景 图 像 bg0006. 
jpg。 

@ 单 击 【 插 入 ] 栏 【布局 〗 选 项 的 [绘制 屋 ] 按 钮 舞 . 在 网 页 合适 的 位 置 插入 一 个 层 , 层 
中 插入 img 文件 夹 中 的 图 像 文 件 email. gif。 

@ 选择 [窗口 II【 时 间 轴 7 命令 ,打开 【时 间 轴 面板 。 选 中 层 ,将 其 拖 入 【时 间 轴 面板 
或 单 击 【 时 间 轴 ] 面 板 右边 的 国 按 钮 .选择 [添加 对 象 ] 命 令 .创建 时 间 轴 动画 条 。 

@ 在 [FFps】 文 本 框 中 输入 20, 选 中 【自动 播放 】 和 【循环 ] 复 选 框 ,将 动画 条 拖 动 延 长 
到 50 帧 处 ,并 将 红色 的 当前 帧 指示 线 拖 动 至 50 帧 处 ,然后 将 层 水 平 拖 动 ,网 页 上 出 现 水 
平 动画 轨迹 。 按 F12 键 预览 页 面 后 .保存 文件 。 

@ 分 别 选中 时 间 轴 动画 条 的 第 10、20、30、40、50 帧 , 单 击 【 时 间 轴 面板 右边 的 国 按 
钮 ,在 弹出 的 菜单 中 选择 【增加 关键 帧 3 命令 ,将 这 些 帧 设置 为 关键 帧 。 分 别 选中 这 些 帧 ， 
然后 拖 动 层 改变 动画 的 运动 轨迹 ,使 动画 轨迹 由 水 平 线 变 为 波浪 线 。 按 Fl12 键 预 览 页 面 
后 保存 文件 。 

@ 分 别 选中 第 10 .30 帧 ,然后 在 【属性 了 面板 中 ,选择 【可 见 性 了 下 拉 式 菜单 的 hidden 
命令 ,隐藏 层 ;分 别 选中 第 20、40 帧 ,然后 在 【属性 面板 中 ,选择 【可 见 性 YF 下拉 菜 单 中 的 
visible 命令 ,显示 层 。 

@ 选中 第 5 帧 ,将 其 设 为 关键 帧 。 单 击 【 时 间 轴 ]J 面 板 右边 的 园 按 钮 ,选择 【添加 行 
为 了 命令 , 单 击 型 按钮 为 该 帧 添加 行为 。 在 【动作 了 荣 单 中 选择 【播放 声音 了 命令 ,此 时 系统 
弹出 【播放 声音 了 对 话 框 , 单 击 【 播 放声 音 了 文本 框 右 侧 的 【浏览 了 按钮 ,选择 music 文件 夹 中 
的 wav 声音 文件 Appluase. wav:, 单 击 【 确 定 了 按钮 确认 。 选 择 默 认 事件 onFrame5 ,保存 文 
件 后 预览 页 面 。 

@@ 打开 网 页 文件 exe4-9. html, 在 网 页 的 合适 位 置 插入 一 个 层 ,选择 [插入 3IK【 交 互 式 
图 像 】I〖 和 鼠标 经 过 图 像 ] 命 令 , 设 置 [ 原 始 图 像 ] 和 [鼠标 经 过 图 像 3 分 别 为 Play. jpg 和 
Stop.jpg。 设 置 在 响应 事件 onClick 时 触发 〖 交 换 图 像 3 的 动作 ;在 响应 事件 onDblClick 
时 触发 [恢复 交换 图 像 3 的 动作 。 

人 选中 图 像 ,在 【行为 了 面板 中 为 该 图 像 添 加 行为 。 在 【动作 3 莱 单 中 选择 【时 间 轴 了 | 
【播放 时 间 轴 3 命令 .在 【事件 3 菜单 中 选择 onClick 命令 。 这 个 行为 表示 单 击 Play 按钮 , 运 
行 时 间 轴 动画 , 且 按 钮 翻转 成 Stop。 

@ 选中 图 像 ,在 【行为 3 面板 中 为 该 图 像 添 加 行为 。 在 【动作 了 莱 单 中 选择 【时 间 轴 了 
【停止 时 间 轴 命令 ,在 【事件 菜单 中 选择 onDblClick 命令 。 这 个 行为 表示 双击 Stop 按 
钮 ,停止 时 间 轴 动画 运行 , 且 按 钮 翻转 成 Play。 

预览 网 页 后 以 exe4-9. html 为 名 将 文件 保存 在 文件 夹 My site 中 。 

(3) 按 题目 要 求 创建 网 页 文件 exe4-10. html, 操 作 步 又 如 下 。 

GO 打开 网 页 文件 exe4-9. html, 在 网 页 合适 位 置 插入 一 个 层 , 层 中 插入 图 像 文件 
bird. gif 。 

@ 选中 该 层 , 然 后 在 【时 间 轴 了 面板 中 右 击 ,在 快捷 菜单 中 选择 【添加 对 象 了 命令 ,增加 
Layer3 的 时 间 轴 动画 条 .并 将 其 长 度 调整 到 50 帧 。 
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@@) 与 Layerl 的 时 间 轴 动画 条 一 样 添加 关键 帧 ,并 在 关键 帧 位 置 改变 动画 运行 的 轨 
迹 , 图 4-6 所 示 。 

@@ 预览 后 ,以 exe4-10. html 为 名 保存 文件 。 

(4) 按 题目 要 求 创建 网 页 文件 exe4-11. html, 操 作 步 又 如 下 。 

制作 说 明 : 

要 制作 符合 题 意 的 滚动 文字 ,可 先 绘制 两 个 层 。Layerl 履 盖 在 圆 角 矩形 框 上 , 稍 小 
于 圆 角 答 形 。Layer2 是 包含 文字 的 层 , 比 Layerl 还 要 小 点 ,是 由 下 而 上 徐徐 移动 的 用 时 
间 轴 控制 的 动画 对 象 , 也 是 Layerl 的 子 层 。 

要 使 滚动 文字 在 圆 角 拓 形 的 框 内 滚动 ,只 需 设 置 层 Layerl 的 【溢出 了 属性 为 hidden， 
使 其 子 层 Layer2 中 的 文字 内 容 超 出 层 Layerl 时 就 被 隐藏 起 来 。 设 置 层 Layer2 的 【可见 
性 了 属性 为 inherit, 便 可 制作 出 符合 题 意 的 滚动 文字 的 网 页 。 

@ 创建 网 页 文件 exe4-11. html, 设 置 背 景 图 像 为 bg0006. jpg。 绘 制 800 X 600 像素 
的 布局 表格 ,并 在 合适 的 位 置 绘制 520X220 像素 的 布局 单元 格 。 

@ 在 布局 单元 格 中 插入 img 文件 夹 中 的 圆 角 矩形 框 的 图 像 文 件 bg. gif, 如 图 4-7 
所 示 。 

@) 单 击 【 插 和 人 了 栏 的 【布局 3 选项 中 的 【描绘 层 ] 按 钮 噬 , 在 圆 角 和 矩形 框 的 图 像 文 件 bg. 
gif 处 绘制 510X200 像素 的 层 Layerl ,在 层 的 【属性 了 面板 的 【溢出 了 下 拉 列 表 框 中 选择 
hidden 选项 ,表示 当 层 Layerl 中 内 容 溢 出 该 层 时 ,那些 内 容 不 能 被 显示 。 

@ 单 击 [ 搬 入 了 栏 的 【布局 选项 中 的 【 撒 绘 层 按钮 辕 , 在 层 Layerl 下 方 ( 即 圆 角 和 矩形 
的 下 面 ) ,绘制 500X160 像素 的 层 Layer2。 在 层 的 5 属性 了 面板 的 【可 见 性 了 下 拉 列 表 框 中 
选择 inherit 选项 。 

@ 打开 文件 book. doc, 复 制 其 中 文字 ,并 粘贴 到 层 Layer2 中 。 

人) 按 F2 键 打开 【层面 板 , 按 住 Ctrl 键 将 Layer2 拖 动 到 Layerl 上 ,使 得 Layer2 成 
为 Layerl 的 子 层 ,如 图 4-12 所 示 。 


图 4-12 【〖 层 了 面板 示意 图 


@ 选择 [窗口 YI【 时 间 轴 3 命令 ,打开 [时 间 轴 面板 。 选 中 位 于 圆 角 和 矩形 下 方 的 层 
Layer2 , 单 击 【5 时间 轴 了 面板 右边 的 快捷 菜单 按钮 ,选择 【添加 对 象 了 命令 ,创建 时 间 轴 动画 
条 , 拖 动 时 间 轴 动画 条 的 最 后 一 帧 使 其 延长 至 第 80 帧 。 并 在 【Fps] 文 本 框 中 输入 10( 表 
示 每 秒 播放 10 帧 ) , 选 史 自动 播放 了 和 区 循环 了 复 选 框 。 

@ 将 红色 的 当前 帧 指示 线 拖 动 至 80 帧 处 ,然后 将 层 Layer2 向 上 拖 动 至 圆 角 和 矩形 框 
的 上 方 ,网 页 中 出 现 垂直 的 动画 轨迹 ,如 图 4-7 所 示 。 
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@@ 保存 网 页 文件 exe4-11. html, 按 F12 键 浏览 网 页 。 
4. 实验 后 的 思考 题 


(1) 响应 事件 的 常用 方式 有 哪 几 种 ?如 何 改 变 行为 的 触发 动作 ? 

(2) Dreamweaver 8 中 预 置 的 常用 行为 有 哪些 ?” 怎样 设置 这 些 行为 ? 

(3) 如 何 通过 选择 更 高 版 本 的 浏览 器 来 增加 更 多 可 选择 的 事件 ? 

(4) 如 何 创建 时 间 轴 动画 ? 什么 是 动画 的 帧 和 关键 帧 ? 如 何 添加 帧 和 关键 帧 ? 

(5) 如 何 设置 播放 和 停止 时 间 轴 的 动作 ? 

(6) 如 何 设置 动画 的 播放 速度 和 动画 中 的 帧 数 ? 如 何 实 现时 间 轴 动画 的 自动 播放 ? 

(7) 如 何 编辑 动画 的 路 径 和 生成 自由 路 径 的 动画 ? 

(8) 如 何 利 用 时 间 轴 改变 层 的 释放 次 序 和 可 见 性 ? 

(9) 如 何在 时 间 轴 中 添加 行为 ? 

(10) 如 何在 同一 个 【时 间 轴 了 面板 中 加 入 多 个 动画 条 ? 如 何 使 用 多 条 时 间 轴 控制 
动画 ? 
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人 层 到 样式 、 模 板 与 库 的 


1. 实验 的 目的 与 要 求 


(1) 掌握 附加 和 编辑 外 部 样式 表 的 方法 。 
(2) 掌握 创建 和 应 用 CSS 样式 表 的 方法 。 
(3) 熟悉 CSS 样式 各 种 特殊 效果 的 用 法 。 
(4) 掌握 模板 的 创建 、 编 辑 和 应 用 的 方法 。 
(5) 掌握 创建 、 编 辑 和 使 用 库 对 象 的 方法 。 


2. 实验 的 操作 内 容 


1) CSS 样式 和 CSS 样式 表 的 创建 、 编 辑 和 应 用 

打开 html 文件 夹 中 的 art. html 文件 , 按 下 列 要 求 , 用 CSS 样式 对 网 页 中 文字 进行 格 
式 化 。 

DOD 在 网 页 编辑 器 窗口 中 ,打开 html 文件 夹 中 的 art. html 文件 。 创建 名 为 
docformat. css 的 层 秋 样式 表 文 件 , 并 新 建 层 秋 样式. docformatl ,设置 【字体 了 为 “方正 舒 
体 ”,【 大 小 ] 为 36 像素 【颜色 3 为 FF0000.【 背 景 图 像 ] 为 img 文件 夹 中 的 图 像 文件 bg. 
jpg, 将 该 样式 作用 于 标题 文字 “生活 和 艺术 ”, 并 将 层 生 样式 表 文 件 docformat. css 保存 在 
本 地 根 文件 夹 中 。 

@) 创建 名 为 . docformat2 的 层 秋 样式 .将 这 个 样式 定义 在 docformat. css 的 层 寺 样式 
表 文 件 中 。 将 其 【类 型 了 中 的 【字体 了 设置 为 “方正 和 舒 体 ”【 大 小 3 为 36 像素 颜色 了 为 
井 FF0000 必 行 高 3 为 40 像素 ,以 及 【背景 色 了 为 并 CCCCCC, 并 将 该 样式 作用 于 标题 文字 
“生活 和 艺术 ”。 预 览 网 页 后 比较 与 中 网 页 的 不 同 之 处 。 

@ 将 名 为 . docformat2 的 样式 复制 成 名 为 . docformat3 的 样式 ,并 将 其 [类 型 ] 中 的 
【字体 了 设置 为 "楷体 【大 小 3 为 18 像素 .【 样 式 ] 为 “正常 ”".【 颜 色 ] 为 # 000099, 首 行 缩 进 
两 个 字符 , 行 高 为 30 像素 ,将 该 样式 作用 于 第 1 段 文字 。 

由 创建 名 为 . docformat4 的 层 琶 样式 ,并 将 其 【类 型 了 中 的 【字体 了 设置 为 “仿宋 体 ”， 
【大 小 3 为 18 像素 .【 样 式 ] 为 “斜体 ”.【 颜 色 ] 为 #333333.【 行 高 为 20 像素 。 将 该 样式 作 
用 于 第 2 段 文字 .浏览 网 页 观察 结果 。 

@ 复制 层 芭 样式 . docformat4 .将 其 改名 为 . docformat5 ,并 将 样式 的 属性 修改 为 【 字 
体 ] 为 “方正 合体 ”*,【 大 小 为 16 像素 民 样 式 3 为 “ 偏 斜 体 ” 攻 颜色 了 为 #000099。 将 该 样式 


作用 于 第 4 段 文字 ,浏览 网 页 观察 其 结果 后 ,保存 网 页 。 

G@) 在 网 页 编辑 器 窗口 中 ,打开 literature. html 文件 ,并 链接 外 部 样式 表 文 件 
docformat. css。 

@ 修改 名 为 . docformat2 的 样式 ,将 [颜色 】# FF0000 改 为 #0000CC, 并 作用 于 标 
题 文 字 “ 中 国文 学 ”。 浏 览 网 页 文档 art. html 和 literature. html, 观察 标题 文字 的 颜色 
变化 。 

@ 创建 名 为 borderl 的 样式 ,选择 【边框 3 类 型 .并 将 其 [样式 7 设 为 【点 划 线 】.【 宽 度 】 
的 [上 3【 右 KFI】【 左 3 的 值 设 为 4 像素 ,【 颜 色 】 设 为 #99CC33。 

@ 分 别 以 borderl ,border2、…、border8 为 名 新 建 层 生 样式 ,选择 [边框] 类 型 ,并 分 
别 定义 它们 的 【样式 3 为 【点 划 线 了 虚线 了 实 线 了 双 线 了 【 槽 状 了 【 兰 状 了 【四 陷 了 【 吓 
出 18 种 风格 ,并 设置 合适 的 边框 宽度 和 颜色 。 

d 在 新 建 网 页 exe5-1. htm 上 的 创建 8 个 1 行 1 列 的 表格 ,表格 的 宽度 和 高 度 是 
100X40 像素 。 分 别 以 borderl、border2、…、border8 作用 于 8 个 表格 ,预览 网 页 观察 其 
效果 。 然 后 保存 样式 表 文 件 docformat. css 和 网 页 文档 exe5-1. htm 。 

2) CSS 样式 表 特 殊 效 果 的 应 用 

(1) 创建 名 为 exe5-2. html 的 网 页 ,在 网 页 合适 的 位 置 插入 380 X285 像素 的 层 , 并 将 
img 文件 夹 中 的 图 像 文件 campus3. jpg 插入 层 中 ,用 CSS 的 Alpha 滤 镜 制作 出 图 5-1 所 
示 的 效果 。 


下 Alpha 滤 樟 的 实验 - Microsoft Internet Explorer 攻 | 问 | 区 | 
:; 文件 时) 编辑 EE) 查看 WW) 收藏 工具 I) 帮助 0D 


图 5-1 Alpha 滤 镜 效果 图 


(2) 创建 名 为 exe5-3. html 的 网 页 ,在 网 页 的 合适 位 置 插入 2 行 2 列 4 个 布局 单元 
格 ,每 个 单元 格 为 120X100 像素 ,并 在 每 个 单元 格 中 插入 img 文件 夹 中 的 图 像 文件 {01. 
jpg, 如 图 5-2 所 示 。 然 后 用 CSS 的 翻转 滤 镜 制作 出 如 图 5-3 所 示 的 效果 。 

(3) 创建 名 为 exe5-4. html 的 网 页 ,在 网 页 合适 位 置 插入 1 行 3 列 3 个 布局 单元 格 ， 
每 个 单元 格 为 100 X220 像素 ,并 在 每 个 单元 格 中 插入 img 文件 夹 中 的 图 像 文 件 campus4. 
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下 Css 翻转 尘 镜 实验 - Hic--- 攻 ] 扣 | 攻 | 
文件 下) ”编辑 节 ) ”查看 GD) 收藏 


jpg。 然 后 用 CSS 的 波浪 滤 镜 制作 出 如 图 5 
左 图 参数 为 Wave(Add 王 1,Freq 一 2 
10); 


下 css 翻 转 泪 镜 奖 验 - Hic--- 攻 | 器 | 区 | 
文件 四， 编辑 到 ) 查看 0 收藏 


图 5-3 CSS 翻转 滤 镜 效果 图 


-4 所 示 的 效果 。 
,LightStrength = 70, Phase= 50, Strength = 


右 图 参数 为 Wave(Add 王 0, Freq 一 3, LightStrength 王 10. Phase 王 75, Strength 一 


10); 


中 间 为 原始 图 像 。 预 览 网 页 后 ,以 exe5-4. html 为 名 将 网 页 保存 在 My site 文件 


夹 中 。 


(4) 创建 名 为 exe5-5. html 的 网 页 ,然后 用 CSS 的 翻转 滤 镜 制作 出 如 图 5-5 所 示 的 效 
果 。 预 览 网 页 后 ,以 exe5-5. html 为 名 将 网 页 保存 在 My site 文件 夹 中 。 


和 CS5 波 浪 泪 镜 实 验 - Wicrosoft Intern--- 攻 | 癌 | 区 
文件 中) ”编辑 下 ) 查看 收藏 由 ) 工具 CI) 厦 >” 


CSS 波 淮 滤 镜 效 果 图 


加 C55 翻 转 滤 镜 实验 - Hicrosoft Intern... [- | 口 | 区 | 


编辑 FE) 查看 WW) 收 庆 &) I 具 0) 和 镍 ” 司 
而 


CSS 翻 转 浇 镜 效果 图 


| 


我 的 电脑 


图 5-4 CSS 波浪 滤 镜 效果 图 


最 我 的 电脑 


图 5-5 ”CSS 翻转 滤 镜 效果 图 


(5) 利用 显示 滤 镜 (RevealTrans) 设 置 进 入 网 页 art. html 的 切换 效果 为 随机 效果 ,其 
参数 为 Revealtrans(Transition 一 23,duration 一 3.0); 设 置 离开 网 页 literature. html 的 效 
果 为 代号 是 8 的 垂直 百叶 窗 ,其 参数 为 Revealtrans(Transition 一 8.duration 一 2.0)。 预 
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览 网 页 后 ,用 原文 件 名 将 网 页 保存 在 My site 文件 夹 中 。 

(6) 打开 网 页 edu. html, 创 建 改 变 鼠 标 指 针 的 CSS 样式 。CSS 样式 . cursorl 为 
Crosshair 细 十 字 和 鼠标 指针 效果 ,CSS 样式 . cursor2 为 help 鼠标 指针 效果 。 将 样式 
.cursorl 作用 在 网 页 左边 的 花纹 上 ,将 样式 . cursor2 作用 在 网 页 的 标题 文字 上 上。 预览 网 
页 后 ,用 原文 件 名 将 网 页 保存 在 My site 文件 夹 中 。 

3) 模板 的 应 用 

(1) 将 htm 文件 夹 中 flower. html 文档 改变 成 模板 ,将 其 中 7 幅 图 像 所 处 的 区 域 设 
置 为 可 编辑 区 ,可 编辑 区 域 的 名 字 为 imgl1、img2、…、img7, 如 图 5-6 所 示 ,模板 文件 名 为 
flower. dwt, 将 模板 文件 保存 在 本 地 网 站 的 Template 文件 夹 中 。 


下 《< 模板 >> (flower. dwt*) 


图 5-6 模板 创建 示意 图 


(2) 利用 模板 文件 flower. dwt, 创 建 网 页 文档 exe5-6. html。 其 中 可 编辑 区 域 插入 的 
图 像 分 别 是 img 文件 夹 中 tul. jpg、tu2. jpg、…、tu7. jpg: 预 览 网 页 后 用 exe5-6. html 保存 
Es 

(3) 将 模板 文件 flower. dwt 改名 为 grid. dwt, 保 存 后 ,更 新 站 点 中 所 有 基于 该 模板 
的 网 页 文件 。 

(4) 修改 模板 文件 grid. dwt, 将 其 背景 图 像 改 为 bg0021. gif, 保 存 修改 后 的 模板 文 
件 。 用 这 个 模板 文件 更 新 站 点 中 所 有 基于 该 模板 的 网 页 文档 ,观察 网 页 文件 flower. html 
和 exe5-6. html 背景 图 像 的 变化 情况 。 

(5) 利用 【资源 了 面板 创建 一 个 名 为 test. dwt 的 模板 ,模板 的 可 编辑 区 有 文字 区 和 图 
像 区 ,版 面 构图 自 定 。 在 模板 的 底部 插入 一 个 层 , 并 将 该 层 定 义 为 可 编辑 区 域 。 

(6) 利用 grid. dwt 模板 创建 网 页 文件 exe5-7. html, 并 在 层 中 插入 closel. gif 文件 ， 
预览 网 页 后 ,保存 网 页 文件 。 

4) 创建 、 编 辑 修 改 与 使 用 库 对 象 

(1) 打开 网 页 文件 exe5-7. html, 将 网 页 中 的 七 幅 图 像 用 菜单 命令 方式 或 鼠标 拖 动 方 
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式 添 加 到 库 中 ,分 别 用 imgl、img2、…、img7 给 库 项 目 命 名 。 将 网 页 底部 的 图 像 文 件 
closel. gif 以 close 为 名 设 为 库 项 目 。 

(2) 打开 网 页 文件 art. html, 将 网 页 中 的 标题 “生活 和 艺术 ”, 用 菜单 命令 方式 或 鼠标 
拖 动 方式 添加 到 库 中 ,用 art 为 其 命名 。 在 网 页 底部 插入 库 项 目 close。 

(3) 将 库 项 目 close 用 外 部 编辑 器 Fireworks 编辑 修改 后 仍 存 放 在 库 中 ,把 库 项 目 
“关闭 窗口 ” 改 为 “发 表 评 论 ”, 对 库 项 目 close 建立 超 链接 ,被 链接 的 网 页 为 exe5-1. html。 


3. 实验 的 参考 步骤 


1) CSS 样式 和 CSS 样式 表 的 创建 编辑 和 应 用 

打开 html 文件 夹 中 的 art. html 文件 , 按 题 意 要 求 ,用 CSS 样式 对 网 页 中 文字 进行 格 
式 化 。 

/在 网 页 编辑 器 窗口 中 打开 art. html 文件 。 选 择 【 窗 口 ]【KCSS 样式 3 命令 或 按 快捷 
键 Shift 十 Fl11, 打 开 KCSS 样式 了 面板 。 在 【CSS 样式 了 面板 中 右 击 ,打开 快捷 菜单 ,选择 【新 
建 ]JCSS 样式 命令 ,在 【新 建 CSS 规则 3 对话 框 中 设置 以 下 参数 。 

。 在 CSS 样式 【选择 器 类 型 了 3 中 选中 [类 (可 应 用 在 任何 标签 )(CC) 了 3 单 选 按钮 。 

。 在 CSS 样式 [名 称 】 文 本 框 中 输入 样式 名 为 : .docformatl 。 

。 在 【定义 在 了 中 选择 [新建 样式 表 文 件 ] 选 项 ,表示 新 建 的 CSS 样式 定义 在 新 的 CSS 
样式 表 文 件 中 , 单 击 【确定 3 按钮 确认 。 

。 在 【保存 样式 表 文 件 为 了 对 话 框 中 ,确定 新 创建 的 层 友 样式 表 文 件 保存 在 文件 夹 
My site 中 , 层 和 到 样式 表 文 件 名 为 docformat. css。 

。 在 【. docformatl 的 CSS 规则 定义 (在 docformat. css 中 ) 了 3 对话 框 的 【类 型 3 中 设置 
【字体 为 “方正 舒 体 ",【 大 小 ] 为 36 像素 民 颜 色 了 为 #f FF0000 必 行 高 3 为 50 像素 。 
在 【背景 3 中 设置 【背景 图 像 3 为 img 文件 夹 中 的 图 像 文 件 bg. jpg。 

单 击 【 确 定 了 按钮 ,保存 层 琶 样式 表 文 件 docformat. css。 选 中 标题 文字 “艺术 与 生活 ” 
后 右 击 ,在 快捷 菜单 中 选择 KCSS 样式 YlIKdocformat1] 命 令 ,将 层 秋 样式 . docformatl 作用 
于 标题 文字 , 按 F12 键 预览 网 页 ,观察 效果 。 

@ 在 【CSS 样式 面板 中 右 击 ,在 快捷 菜单 中 选择 [新建 ICSS 样式 命令 ,仿照 题 中 在 
docformat. css 层 秋 样式 表 文 件 中 创建 名 为 . docformat2 的 层 秋 样式 ,将 其 [类 型 ] 中 的 
【字体 设置 为 “方正 舒 体 ”",【 大 小 为 36 像素 .【 颜 色 ]】 为 # FF0000.【 行 高 ] 为 40 像素 ,以 
及 【背景 色 ] 为 #CCCCCC。 选 中 标题 文字 “生活 和 艺术 ”后 右 击 ,在 快捷 菜单 中 选择 [CSS 
样式 3IKdocformat2] 命 令 ,将 层 秋 样式. docformat2 作用 于 标题 文字 .预览 网 页 后 比较 与 
题 四 的 不 同 之 处 。 

@@ 选中 . docformat2 的 样式 右 击 , 在 快捷 菜单 中 选择 [复制] 命令 ,在 【复制 CSS 规 
则 了 对 话 框 中 选中 【类 (可 应 用 在 任何 标签 )(C)7 了 单 选 按钮 ,在 【名 称 】 文 本 框 中 输入 样式 名 
为 . docformat3 ,并 将 该 文件 定义 在 docformat. css 文件 中 。 

选中 层 琶 样式 . docformat3 , 单 击 【CSS 样式 了 面板 右 下 角 的 【编辑 按钮 一 .在 
【. docformat3 的 CSS 规则 定义 (在 docformat. css 中 7) 对话 框 中 :将 其 【类 型 3 中 的 【字体 】 了 
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设置 为 “楷体 *,【 大 小 ] 为 18 像素 .【 样 式 ] 为 “正常 *,【 颜 色 】 为 #000099.【 行 高 ] 为 30 像 
素 。 在 【区 块 3 的 [文字 缩 进 ] 文 本 框 中 输入 2.【 单 位 ] 为 12pt 字 (pc)。 选 中 网 页 第 1 段 文 
字 , 右 击 后 选择 [CSS 样式 3IK〖docformat3] 命 令 或 者 在 【属性 面板 的 【样式 3 下 拉 列 表 框 中 
选择 层 释 样式 . docformat3 ,将 该 样式 作用 于 网 页 的 第 1 段 文字 。 

@ 仿照 题 四 创建 名 为 . docformat4 的 层 至 样式 ,并 将 其 【类 型 3 中 的 【字体 了 设置 为 
“仿宋 体 ” 攻 大 小 3 为 16 像素 ,【 样 式 ] 为 “斜体 ”",【 颜 色 ]】 为 #333333.【 行 高 ] 为 40 像素 。 将 
该 样式 作用 于 第 2 段 文字 ,浏览 网 页 观察 结果 。 

@ 仿照 题 @@ 复 制 层 笃 样 式 . docformat4 ,将 . docformat4copy 重 命名 为 . docformat5， 
并 将 样式 的 属性 修改 为 【字体 为 “方正 每 体 ”".【 大 小 ] 为 16 像素 ,【 样 式 ] 为 “ 偏 斜体 ”",【 凑 
色 了 为 并 000099。 将 该 样式 作用 于 第 4 段 文字 ,浏览 网 页 观察 结果 后 ,保存 网 页 。 

@ 在 网 页 编辑 器 窗口 中 ,打开 literature. html 文件 , 单 击 【CSS 样式 了 面板 右 下 角 的 
【附加 样式 表 了 按钮 锣 ,在 【链接 外 部 样式 表 文 件 了 对 话 框 中 ,链接 外 部 样式 表 文 件 
docformat. css。 

@ 选中 . docformat2 的 样式 ,将 【颜色 了 # FF0000 改 为 #0000CC, 并 作用 于 标题 文字 
“中 国文 学 ”。 浏 览 网 页 文档 art. html 和 literature. html, 观 察 标 题 文 字 的 颜色 变化 。 

@@ 打开 【CSS 样式 了 面板 ,在 【CSS 样式 了 面板 中 右 击 , 打 开 快 捷 菜单 ,选择 【新 建 ] 命 
令 ,在 【新 建 CSS 规则 对 话 框 中 输入 CSS 样式 的 【名 称 了 为 . borderl ,在 【选择 器 类 型 3 中 
选中 [类 (可 应 用 于 任何 标签 ;)(C)] 单 选 按 钮 ,在 【定义 在 3 区 域 中 选择 【docformat. css] 选 
项 ; 单 击 【确定 了 按钮 确认 。 

在 【. borderl 的 CSS 样式 定义 (在 docformat. css 中 )3 对 话 框 中 设置 以 下 人 参数。 

选择 [边框 ] 类 型 .并 将 其 [样式 ] 为 【点 划 线 】 ,将 【宽度 3 的 [上 Xr【 布 .KF3【 左 3 的 值 
设置 为 4 像素 民 颜 色 3 设 为 #f99CC33 ,如 图 5-7 所 示 , 然 后 单 击 【 确 定 3 按 钮 确认 。 


-borderl 的 C55 规则 定义 (在 docformat-css 中 ) 


样式 宽度 颜色 
回 全 部 相同 G@) 全 部 相同 @) 
点 国 | #99CC33 


:| 点 为 由 人 Y #99cc33 


E27 ec33 


| 点 沁 | ~ 本 #99cc33 


图 5-7 层 全 样式 . borderl 设置 示例 


用 与 上 题 相同 的 方法 ,在 层 禾 样式 表 文 件 docformat. css 中 ,以 border2、border3、 
…、border8 为 名 新 建 CSS 样式 .定义 【虚线 】【 实 线 】、【 双 线 】r【 槽 状 3【 次 状 3【 凹 陷 、 
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【 唔 出 了 7 种 风格 的 样式 ,并 将 其 参数 【宽度 了 的 K 上 了 J【 右 了 【下 IT 左 3 的 值 设 置 为 4 像素 ， 
【颜色 3] 自 定 。 

轿 新建 网 页 文件 exe5-1. html, 在 网 页 上 创建 8 个 1 行 1 列 的 表格 (也 可 用 布局 单元 
格 绘 制 ) ,表格 的 宽度 和 高 度 是 100X40 像素 。 右 击 , 在 快捷 菜单 中 选择 【附加 样式 表 了 】 命 
令 ,将 样式 表 文 件 docformat. css 链接 到 当前 文档 中 ,再 分 别 以 borderl、border2、…、 
border8 为 名 的 CSS 样式 作用 于 8 个 表格 ,如 图 5-8 所 示 ,预览 网 页 观察 其 效果 。 然 后 将 
样式 表 文 件 docformat. css 和 网 页 文档 exe5-1. html 保存 在 My site 文件 夹 下 。 


可 css 样 式 的 实验 一 了 icrosoft Internet Explorer 
; 文件 FE) 编辑 于 ) ”查看 收藏 和 ) 工具 CI) 帮助 0D 


Ed 


点 划 线 
bh 


[| 冬 


图 5-8 各 种 风格 边框 效果 示例 


2) CSS 样式 表 特 殊 效 果 的 应 用 
(1) 创建 名 为 exe5-2. html 的 网 页 , 并 设置 背景 图 像 bg0013. jpg 以 及 其 他 必需 的 页 
面 属性 后 ,将 网 页 保存 在 本 地 站 点 中 。 

@ 在 网 页 合适 的 位 置 插入 380 Xx 285 像素 的 层 , 并 将 img 文件 夹 中 的 图 像 文件 

campus3.jpg 插入 层 中 。 

@ 打开 【CSS 样式 面板 , 右 击 ,在 快捷 菜单 中 选择 [新 建 3 命 令 ,将 新 样式 保存 在 样式 

表 文 件 filter. css 中 ,在 【新 建 对 话 框 中 设置 以 下 参数 。 

。 在 CSS 样式 【选择 器 类 型 了 区 域 中 选择 【类 (可 应 用 于 任何 标签 )(CC) 了 3 单 选 按钮 ; 

。 在 CSS 样式 [选择 器 了 文本 框 中 输入 样式 名 为 : . filterl; 

。 在 【定义 在 3 区域 中 选择 【新 建 样式 表 文 件 ] 选 项 .表示 新 建 的 CSS 样式 定义 在 
filter. css 样式 表 文 件 中 ,并 将 filter. css 保存 在 本 地 站 点 下 , 单 击 【确定 了 按钮 
确认 。 

@ 在 【. filterl 的 CSS 规则 定义 了 对 话 框 中 设置 以 下 参数 。 

在 【分 类 列表 框 中 选择 【扩展 3 类 型 ,在 【 滤 镜 了 FF 拉 列 表 框 中 选择 Alpha 选项 ,并 设 
置 Alpha 参数 。 本 例 设置 

Alpha(Opacity= 100,FinishOpacity=0,Style=2,StartX=0,StartY=0,FinishX= 
650, FinishY=550) 

参数 意义 如 下 。 

。 Opacity 设置 初始 不 透明 度 ,范围 为 0 一 100。 设 定 的 值 是 100 表示 为 完全 不 透明 。 
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。 FinishOpacity 设置 终止 不 透明 度 。 
。 Style 设置 渐变 类 型 ,数值 0 表示 使 用 同一 不 透明 度 ; 数 值 1 表示 使 用 线性 渐变 ; 
数值 2 表示 使 用 放射 性 渐变 ;数值 3 表示 使 用 直角 渐变 。 
。 StartX,StartY 滤 景 效果 的 初始 坐标 。 
。 FinishX,FinishY 滤 景 效果 的 终止 坐标 。 
@ 选中 图 像 , 右 击 ,在 快捷 菜单 中 选择 filterl ,将 该 样式 作用 于 图 像 。 
加 将 网 页 文件 以 exe5-2. html 为 文件 名 保存 在 My site。 
(2) 创建 名 为 exe5-3. html 的 网 页 , 按 题 意 制作 网 页 ,操作 步骤 如 下 。 
za 在 网 页 的 合适 位 置 插入 2 行 2 列 4 个 布局 单元 格 。 单 击 【 插 入 3 栏 的 【布局 〗 选 项 ， 
切换 成 布局 视图 模式 , 单 击 【 布 局 表格 3 按钮 是, 将 鼠标 指针 移 到 网 页 编辑 窗口 中 ,在 合适 
的 位 置 拖 动 鼠标 ,在 网 页 编辑 窗口 中 夯 出 240X200 像素 的 布局 表格 。 单 击 【 布 局 单元 格 】 
的 按钮 峡 , 在 布局 表格 中 夯 出 2 行 2 列 4 个 布局 单元 格 , 每 个 单元 格 为 120X100 像素 。 
@ 在 每 个 单元 格 中 插入 img 文件 夹 中 的 图 像 文件 f01. jpg, 如 图 5-2 所 示 。 
@ 打开 【CSS 样式 面板 , 右 击 ,在 快捷 菜单 中 选择 【附加 样式 表 ] 命 令 ,在 打开 的 【 链 
接 外 部 样式 表 对 话 框 中 选择 样式 表 文 件 filter. css 链接 到 当前 文档 。 
@ 在 快捷 菜单 中 再 选择 【新 建 ] 命 令 ,并 在 【新 建 CSS 规则 对话 框 中 设置 以 下 参数 。 
。 在 CSS 样式 【选择 器 类 型 3 中 选中 [类 (可 应 用 于 任何 标签 )(C) 了 3 单 选 按钮 。 
。 在 CSS 样式 [选择 器 ] 文 本 框 中 输入 样式 名 为 :. fliph。 
。 在 【定义 在 ] 中 选择 Kfilter. css】〗 选 项 ,表示 新 建 的 CSS 样式 定义 在 filter. css 样式 
表 文 件 中 , 单 击 【 确 定 3 按 钮 确认 。 
在 【. fliph 的 CSS 规则 定义 (在 filter. css 中 )】 对 话 框 中 设置 以 下 参数 。 
。 在 [分类] 列表 框 中 选择 [扩展 ] 类 型 ,在 【 滤 镜 3 下 拉 列 表 框 中 选择 FlipH 选项 (水 
平 翻转 ) 。 
。 用 同样 的 方法 在 层 秋 样式 表 文 件 filter. css 中 定义 样式 FlipV( 垂 直 翻 转 ) 。 
@ 将 CSS 的 翻转 滤 镜 FlipH 作用 于 左上 图 ,CSS 的 翻转 滤 镜 FlipV 作用 于 右 下 图 ， 
在 左下 角 布 局 单元 格 处 插入 120 X100 像素 的 层 , 其 中 插入 图 像 文件 {01. jpg, 然 后 用 CSS 
的 翻转 滤 镜 FlipH 和 FlipV 作用 于 层 中 图 像 , 制 作出 如 图 5-3 所 示 的 效果 。 也 可 以 定义 
新 的 样式 FF 将 FlipH 和 FlipV 同时 输入 滤 镜 器 的 下 拉 列 表 框 中 ,中 间 用 空格 分 割 , 用 样 
式 FF 作用 于 左下 角 的 图 像 ,这 样 就 可 以 制作 出 如 图 5-3 所 示 效 果 了 。 
@ 预览 网 页 后 以 exe5-3. html 为 名 将 网 页 文件 保存 在 My site 文件 夹 中 。 
注意 : 
。 要 对 图 像 两 次 作用 CSS 样式 ,可 先 添加 层 , 在 层 中 插入 图 像 ,再 对 层 两 次 作用 CSS 
样式 。 
。 也 可 以 定义 新 的 样式 ,将 FlipH 和 FlipV 同时 输入 滤 镜 器 的 下 拉 列 表 框 中 ,中 间 
用 空格 分 割 ,用 新 样式 作用 于 左下 角 的 图 像 ,可 完成 图 像 的 水 平和 重 直 翻转 。 
(3) 创建 名 为 exe5-4. html 的 网 页 , 按 题 意 制作 网 页 ,操作 步骤 如 下 。 
za 在 网 页 合适 位 置 插入 1 行 3 列 3 个 布局 单元 格 , 每 个 单元 格 为 100X220 像素 ,并 
在 每 个 单元 格 中 插 和 人 ch05 文件 夹 中 的 图 像 文件 campus4. jpg。 
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@ 打开 【CSS 样式 了 面板 ,附加 样式 表 文 件 filter. css 链接 到 当前 文档 。 
在 【CSS 样式 了 面板 中 右 击 .再 选择 快捷 菜单 中 【新 建 ] 命 令 , 并 在 【新 建 CSS 规则 对 
话 框 中 设置 以 下 参数 。 

。 在 CSS 样式 【类 型 3 中 选中 【类 (可 应 用 于 任何 标签 )(CC) 了 单 选 按钮 。 

。 在 CSS 样式 [名 称 ] 文 本 框 中 输入 样式 名 为 . Wavel。 

。 在 【定义 在 区 域 中 选择 Kfilter. css] 选 项 ,表示 新 建 的 CSS 样式 定义 在 filter. css 
样式 表 文 件 中 , 单 击 【确定 了 按钮 确认 。 

。 在 【. Wavel 的 CSS 样式 定义 (在 filter. css 中 7) 了 对 话 框 中 设置 以 下 参数 。 

。 在 【分 类 3 列表 框 中 选择 【扩展 类 型 ,在 【 滤 镜 下拉 列 表 框 中 选择 Wave 选项 , 创 
建 CSS 样式 Wavel(Add 王 1,Freq 一 2,LightStrength 一 70.Phase 一 50,Strength 
一 10) 。 

@@ 用 同样 的 方法 创建 CSS 样式 Wave2(Add 王 0, Freq 一 3, LightStrength 一 10， 
Phase 一 75 ,Strength 一 10) 。 

@ 用 . Wavel 作用 于 左 图 ,用 . Wave2 作用 于 右 图 ,中 间 为 原始 图 像 。 

注意 ; 

滤 镜 . Wave 的 参数 意义 如 下 。 

。 Add 为 是 否 将 原始 图 像 加 入 变形 后 的 图 像 ,0 表示 “ 否 ”;1 表示 “是 ”。 

。 Freq 表示 扭曲 效果 中 出 现 的 波形 数目 。 

。 LightStrength 确定 波形 亮度 的 深浅 , 取 值 越 大 则 越 亮 。 取 值 范围 为 0 一 100 的 
整数 。 

。 Phase 表示 波形 的 初 相位 ,该 值 决定 了 波形 的 形状 。 其 取 值 范围 为 0 一 100 的 
整数 。 

。 Strength 表示 波形 的 强度 。 其 取 值 范围 为 0 一 100 的 整数 。 

@) 预览 后 ,将 网 页 文件 以 exe5-4. html 为 文件 名 保存 在 My site 文件 夹 中 。 

(4) 创建 名 为 exe5-5. html 的 网 页 ,仿照 上 题 插 入 单元 格 和 图 像 ,用 CSS 水 平 翻转 滤 
镜 作 用 于 图 像 ,操作 略 。 预 览 网 页 后 ,以 exe5-5. html 为 名 将 网 页 保存 在 My site 文件 
夹 中 。 

(5) 打开 网 页 文件 art. html. 按 题 意 完 成 如 下 操作 。 

@) 单 击 【搬入 了 栏 的 KEHTML3 选 项 的 【文件 头 】 下 拉 列 表 框 ,选择 【Meta 了 ,或 者 选择 
【搬入 KKHTML3IK 文 件 头 标签 3 区 Meta 命 令 ,打开 【Meta 对 话 框 。 

@) 在 【属性 了 下 拉 列 表 框 中 选择 【HTTP-equivalent 选 项 ,在 【 值 】 文 本 框 中 可 输入 
【Page-Enter 和 参数, 表示 进入 网 页 切换 效果 。 在 【内 容 】 文 本 框 中 输入 Revealtrans 
CTransition 一 23.duration 一 3.0) .表示 网 页 切换 效果 的 延续 时 间 (Cduration) 为 3 秒 ,网 页 
切换 效果 方式 (Transition) 为 随机 特效 。 

@ 打开 网 页 literature. html, 选 中 标题 文字 ,建立 与 网 页 文件 art. html 的 超级 链接 , 
浏览 该 网 页 ,观察 切换 效果 。 

@ 用 同样 的 方法 设置 离开 网 页 literature. html 的 切换 效果 是 垂直 百叶 窗 ,其 参数 为 


Revealtrans(Transition 一 8.duration 一 2.0) 。 
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@ 预览 网 页 后 ,用 原文 件 名 将 网 页 保存 在 HTML 文件 夹 中 。 


注意 : 
在 网 页 上 添加 了 切换 特效 后 ,实际 上 是 在 网 页 的 二 head 盖 与 二 /head 一 区 域 添 加 了 代 
码 : 一 meta http-equiv 一 "Page-Enter”content 一 "Revealtrans(CTransition 一 23,duration 


一 3.0)" 盖 ,要 使 这 行 代码 放 在 王 head 一 标签 的 下 一 行 ,如 果 放 在 二 /head 一 的 上 一 行 ,有 
时 特效 显示 会 无 效 。 

(6) 打开 网 页 文件 edu. html, 按 题 意 完成 如 下 操作 。 

QO 选择 【窗口 |KCSS 样式 】 命令 ,打开 [CSS 样式 ] 面 板 。 右 击 ,在 快捷 菜单 中 选择 
【新 建 ] 命 令 ,打开 【新 建 CSS 规则 对 话 框 。 

@ 在 【选择 器 类 型 3 中 选中 【类 (可 应 用 于 任何 标签 )CC)7 了 3 单 选 按钮 ,在 【名 称 】 文 本 框 
中 输入 .cursorl ,在 【定义 在 选项 中 选择 [filter. css】 ,并 单 击 【确定 3 按钮 确认 。 

@@ 在 【. cursorl 的 CSS 样式 定义 (在 filter. css 中 7) 了 对话 框 中 ,选择 【分 类 3 列表 框 的 
【扩展 3 选项 , 按 题 意 设置 【光标 了 的 视觉 效果 为 Crosshair, 单 击 【 确 定 了 按钮 就 新 建立 了 
CSS 样式 。 

@ 用 同样 的 方法 创建 CSS 样式 . cursor2 。 

@ 在 网 页 左 侧 花纹 处 右 击 ,应 用 CSS 样式 . cursorl1。 选 中 网 页 的 标题 文字 , 右 击 , 应 
用 CSS 样式 . cursor2 。 

@ 预览 网 页 后 ,用 原文 件 名 将 网 页 保存 在 My site 文件 夹 中 。 

3) 模板 的 应 用 

(1) 打开 HTML 文件 夹 中 flower. html 文档 , 按 题 意 创建 模板 。 

Oz 按 Fl1l 键 或 选择 [窗口 3I【 资 源 ] 命 令 , 打 开 【 资 源 ] 面 板 。 单 击 【 资 源 ] 面 板 左 侧 的 
【模板 3 按钮 ,在 【模板 3 面板 中 右 击 ,打开 快捷 菜单 .选择 【新 建 模 板 ] 命 令 , 输 入 模板 名 : 
flower。 

@ 选择 [文件 了 民 另 存 为 模板 了 命令 ,保存 模板 文件 flower. dwt。 

注意 : 

模板 文件 必须 保存 在 本 地 站 点 的 Template 子 文件 夹 内 。 

@ 将 光标 搬入 网 页 中 的 图 像 区 域 , 选 择 【 插 入 了 民 模 板 对 象 了 可 编辑 区 域 3 命 令 ,在 
【新 建 可 编辑 区 域 】 对 话 框 中 输入 参数 ,在 [名称] 文本 框 中 输入 可 编辑 区 域 的 名 字 为 
imgl ,并 单 击 【 确 定 3 按 钮 确认 。 用 同样 的 方法 定义 其 他 六 个 可 编辑 区 域 mg2、…、img7。 
并 保存 模板 文件 。 

(2) 用 模板 flower 创建 新 网 页 exe5-6. html。 

@ 选择 【文件 了 新 建 ] 命 令 ,在 弹出 的 [新 建文 档 3 对 话 框 中 , 单 击 【 模 板 】 ,对话 框 变 
成 【从 模板 新 建 3 的 对 话 框 。 在 此 左 侧 的 【模板 用 于 3 列表 框 中 ,选择 新 建 的 网 页 页 面 所 用 
的 模板 名 称 ,此 时 在 右边 的 预览 窗口 中 会 显示 选中 的 模板 。 

@ 选中 [ 当 模 板 改 变 时 更 新 网 页 ] 复 选 框 ,这 样 当 模板 被 修改 后 ,用 此 模板 创建 的 网 
页 也 会 被 修改 。 单 击 【 创 建 3 按 钮 便 可 创建 一 个 模板 的 网 页 页 面 。 

@ 删除 模板 的 可 编辑 区 域 中 原先 的 图 像 ,在 可 编辑 区 域 插入 img 文件 夹 中 的 图 像 
tul. jpg、\tu2. jpg、…、\tu7.jpg。 预 览 网 页 后 以 exe5-6. html 为 名 保存 文件 。 


TH 
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(3) 按 题 意 完成 模板 的 操作 。 

OO 按 Fll 键 , 打开 【资源 面板 。 

@ 选择 其 中 的 模板 flower: 右 击 , 在 快捷 菜单 中 选择 【 重 命名 了 命令 ,将 模板 flower 改 
名 为 grid, 系 统 弹出 【更 新 文件 3] 对话 框 。 

@ 单 击 【更 新 3 按钮 完成 网 页 文件 的 更 新 。 

(4) 按 题 意 完 成 模板 的 操作 。 

@ 按 Fll 键 ,打开 [资源 面板 。 

@ 选择 其 中 的 模板 grid. 右 击 . 选 择 快 捷 菜单 中 [编辑 命令 .然后 在 代码 视图 中 ,将 
其 背景 图 像 改 为 bg0021. gif ,保存 修改 后 的 模板 文件 。 

@) 在 【资源 了 面板 中 右 击 ,在 快捷 菜单 中 选择 【更 新 站 点 命令 ,更 新 站 点 中 所 有 基于 
该 模板 的 网 页 文档 ,打开 网 页 文件 exe5-6. html 观察 背景 图 像 的 变化 情况 。 

(5) 利用 【资源 了 面板 创建 一 个 名 为 test. dwt 的 模板 ,模板 的 可 编辑 区 有 文字 区 和 图 
像 区 ,版 面 构 图 自 定 。 在 模板 的 底部 插入 一 个 层 , 并 将 该 层 定 义 为 可 编辑 区 域 。 参考 上 述 
习题 ,操作 步骤 略 。 

(6) 选择 [文件 XIK 新 建 3 命 令 ,在 弹出 的 [新 建文 档 3 对 话 框 中 , 单 击 【 模 板 】, 对 话 框 变 
成 5 从 模板 新 建 3 的 对 话 框 。 在 此 左 侧 的 【模板 用 于 了 列表 框 中 ,选择 本 地 站 点 以 及 所 用 的 
grid. dwt 模板 ,此 时 在 右边 的 预览 窗口 中 会 显示 选中 的 模板 grid. dwt, 单 击 【 创 建 3 按 钮 
打开 模板 。 网 页 的 底部 搬入 一 个 层 , 层 内 插入 img 文件 夹 中 的 图 像 文件 closel. gif ,并 浏 
览 该 网 页 ,然后 以 exe5-7. html 为 名 将 文件 保存 在 My site 文件 夹 中 。 

4) 创建 、 编 辑 修改 与 使 用 库 对 象 

(1) 打开 网 页 文件 exe5-7. html, 按 题 意 创建 库 项 目 。 

OO 按 Fll 键 , 打 开 【 资 源 了 面板 。 单 击 【 资 源 了 面板 左下 角 的 库 项 目 按钮 加 ,切换 到 
【 库 3 面 板 。 

@ 选中 网 页 中 的 图 像 ,直接 用 鼠标 将 其 拖 动 到 【 库 了 面板 中 ,或 选择 【修改 ] 民 库 了 民 增 
加 对 象 到 库 了 命令 将 选中 的 图 像 加 入 到 【 库 了 面板 中 .并 分 别 用 imgl、img2、…、img7 给 这 
些 库 项 目 命 名 。 

@ 在 网 页 底部 插入 一 个 层 , 并 将 文件 夹 img 中 closel. gif 插入 层 中 。 

@ 选中 该 图 像 将 其 拖 人 库 中 ,并 命名 为 close。 

(2) 打开 网 页 文件 art. html, 按 题 意 完成 库 项 目的 操作 。 

OO 选中 网 页 中 的 标题 “生活 和 艺术 ”, 直接 用 鼠标 将 其 拖 动 到 【 库 面 板 中 ,或 选择 
【修改 了 民 库 了 区 增 加 对 象 到 库 了 命令 ,将 选中 的 文字 加 入 到 库 中 ,并 用 art 为 其 命名 。 

@ 在 网 页 底部 插入 150 X35 像素 的 层 , 选 中 [ 库 ] 面 板 中 名 为 close 的 库 项 目 , 右 击 ， 
在 快捷 菜单 中 选择 [插入 3 命令 或 直接 将 库 项 目 拖 到 网 页 底部 的 层 中 。 

@ 预览 后 ,保存 网 页 文件 。 

(3) 按 题 意 修 改 库 项 目 close. 并 更 新 网 站 。 

Oz 在 【 库 了 面板 中 双击 库 项 目 close. 打 开 该 库 项 目 . 并 选中 该 库 项 目 。 

@) 单 击 【 属 性 了 面板 中 的 【编辑 了 按钮 启动 Fireworks 8 编辑 该 库 项 目 ,如 图 5-9 所 示 。 

G@) 在 Fireworks 8 编辑 窗口 中 ,编辑 图 像 的 操作 步骤 如 下 。 
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acronedia Fireworks 8- [--- 于 器 区 | 
文件 于 ) 编辑 下 ) 视图 () 选择 G) 修改 @ 文本 名) 
命令 CE) 滤 镜 江 ) 窗口 GD) 帮助 


| 原始 | 加 预览 中 2 幅 田 4 旺 | 内 


图 5-9 用 Fireworks 8 编辑 库 项 目 


。 用 [指针 3 工具 选中 文字 “发 表 评 论 ”, 按 Del 键 ,将 文字 删除 ,如 图 5-10 所 示 。 

。 单 击 工具 箱 中 的 文字 输入 工具 入 ,打开 【编辑 器 3 对 话 框 ,输入 文字 “返回 首页 ”, 并 
设置 字体 和 字 的 大 小 , 单 击 【 确 定 了 按钮 确认 ,如 图 5-11 所 示 。 

。 选中 编辑 窗口 中 的 文字 ,在 Fireworks 8 文字 的 【属性 了 面板 中 , 单 击 【 效 果 了 添加 按 
钮 到 |, 在 快捷 菜单 中 选择 【阴影 和 光 晕 了 区 投 影 】 命 令 , 其 他 参数 默认 ,给 文字 添加 
阴影 效果 。 


动 Hacromaedia Fireworks 8 ---- 尼 | 加 | 区) 
文件 下) 编辑 时) 视图 (WW) 选择 G) 修改 吕 ) 
命令 C) 滤 镜 这 ) 窗口 他 ) 帮助 0D 
closel. pnet* 
LE | | 园 预 览 口 2 幅 田 4 | 


WD Hacr a Fireworks 8 -... [Cc | 右 | 区 | 
文件 编辑 下)】 视图 CD) 选择 G) 修改 仙 
文本 加 命令 (C) 泥 镜 CI) 窗口 由， 帮助 00 
选择 closel. pne* 
RR 目 [ 原 始 | 加 预览 上 > 幅 旬 4 幅 | 


Ed 
= > Pp 1 4 140x32 [100 


8. 
[A>m 1 dlp GT 146x32 [100 


图 5-10 ”删除 文字 图 5-11 输入 更 换 的 文字 


@ 单 击 Fireworks 8 窗口 中 的 【完成 了 按钮 返回 Dreamweaver 8, 库 项 目 修改 完成 。 

@ 选中 库 项 目 ,在 【属性 ] 面 板 中 建立 exe5-1. html 的 超 链接 ,保存 库 项 目 close。 

@ 布 击 【 库 面板 ,在 快捷 菜单 中 选择 【更 新 站 点 3 命令 更 新 整个 站 点 。 预 览 有 该 库 项 
目的 网 页 ,观察 库 项 目 被 修改 后 网 页 的 变化 。 
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4. 实验 后 的 思考 题 


(1) 层 全 样式 表 和 层 钱 样式 的 主要 区 别 是 什么 ? 怎样 在 层 友 样式 表 中 增加 新 的 
样式 ? 

(2) 是 否 可 以 用 多 个 层 盖 样式 作用 于 网 页 中 的 一 个 对 象 ? 

(3) 是 否 可 以 用 多 个 层 盖 样式 表 文 件 作 用 于 一 个 网 页 ? 

(4) 是 否 可 以 将 CSS 样式 转换 为 HTML 样式 ? 

(5) CSS 滤 镜 的 应 用 要 注意 什么 ? 是 不 是 所 有 滤 镜 都 能 被 浏览 器 所 支持 ? 

(6) 应 用 滤 镜 后 的 图 像 效 果 可 以 直接 在 网 页 编辑 窗口 中 看 到 吗 ? 

(7) 试用 CSS 样式 的 其 他 滤 镜 的 效果 。 

(8) 归纳 总 结 用 【资源 了 面板 管理 本 地 站 点 中 各 种 网 页 元 素 的 方法 。 

(9) 模板 和 库 的 主要 区 别 是 什么 ? 它们 各 自 的 优 缺 点 有 哪些 ? 

(10) 是 否 可 以 将 模板 文件 保存 在 Template 文件 夹 外 ? 是 否 可 以 将 模板 文件 保存 在 
本 地 站 点 的 根 文 件 夹 外 ? 是 否 可 以 将 非 模板 文件 保存 在 Template 文件 夹 中 ? 
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6 表单 与 扩展 管理 器 的 实验 


实验 


1. 实验 的 目的 与 要 求 


(1) 掌握 表单 的 创建 和 编辑 的 方法 。 

(2) 熟悉 各 种 表单 域 的 使 用 方法 。 

(3) 了 解 【Macromedia 扩展 管理 器 3 的 使 用 方法 。 
(4) 了 了解 【代码 视图 了 模式 的 使 用 方法 。 


2. 实验 的 操作 内 容 


1) 表单 和 表单 域 的 基本 操作 

(1) 创建 一 个 名 为 exe6-1. html 的 网 页 文件 ,网 页 中 表单 域 及 内 容 安排 如 图 6-1 
所 示 。 

表单 以 E-mail 方式 提交 .E-mail 地 址 为 设计 者 的 合法 邮件 地 址 。 


马 表单 实验 - icrosoft Internet Explorer 
文件 F) 编辑 人 E) ”查看 上 ) 收藏 由) 工具 CX) 帮助 00 


了 | 您 的 最 高 学 历 : 


您 的 爱好 : ” 厂 看 书 厂 音乐 “三 旅游 


您 对 本 网 站 的 意见 : 


图 6-1 表单 练习 示意 图 


(2) 创建 一 个 如 图 6-2 所 示 的 信息 反馈 的 表单 ,并 根据 输入 的 数据 类 型 设置 表单 域 
的 验证 行为 ,使 得 当 在 表单 中 输入 了 无 效 数据 后 ,提交 表单 时 会 显示 错误 提示 信息 。 


EE t= 了 icroso ft Internet Explorer 
; 文件 @) 编辑 区 ) 查看 WW) 收藏 和 工具 加 ) ey 


图 6-2 信息 反馈 的 表单 


2) 网 页 扩展 管理 器 的 操作 题 

(1) 启动 Dreamweaver 8 的 【扩展 管理 器 】. 在 其 中 安装 mxp 文件 夹 中 的 
Dreamweaver 8 的 插件 wintime. mxp ,该 插件 的 功能 是 在 到 了 设 定 的 时 间 时 关闭 当前 窗 
口 。 将 搬 件 应 用 于 网 页 文件 exe6-1. html, 设 置 打开 网 页 3 秒 钟 后 关闭 该 网 页 。 预 览 网 页 
观察 其 结果 后 将 网 页 文件 恢复 原样 。 

(2) 在 Dreamweaver 8 的 【扩展 管理 器 3 中 ,安装 mxp 文件 夹 中 的 Dreamweaver 8 的 
捅 件 Scrolling Status Bar. mxp ,该 插件 的 功能 是 在 浏览 器 的 状态 栏 中 依次 显示 多 种 状态 
栏 文本 内 容 。 将 插件 应 用 于 网 页 文件 exe6-1. html,. 设 置 状 态 栏 显示 的 文字 依次 为 
“ 书 一 一 人 类 的 朋友 .精神 的 粮食 “藏书 不 难 ,能 看 为 难 "、“ 看 书 不 难 , 能 读 为 难 ”"、“ 读 书 
不 难 , 能 用 为 难 ”“ 能 用 不 难 ,能 记 为 难 ”。 预 览 网 页 观察 其 结果 后 保存 文件 。 

(3) 将 doc 文件 夹 中 “字符 围绕 鼠标 . doc” 文 件 中 的 代码 添加 到 网 页 文件 exe6-1. 
html 的 一 head 一 区域 中 ,预览 网 页 观察 结果 后 保存 文件 。 

3) 网 页 综合 练习 题 

(1) op 上 方 和 嵌 套 的 左 方 框架 ”结构 的 网 页 ,并 使 框架 网 页 符合 下 列 要 求 。 

架 集 文件 名 为 index. html, 左 框架 文件 名 为 left. html, 并 设置 背景 颜色 为 

Wg 左 框架 的 【 列 了 宽度 为 270 像素 , 顶 框架 文件 名 为 top. html, 顶 框架 的 [ 行 ] 高 度 
为 165 像素 ,并 设置 背景 颜色 为 #660000, 插 入 Flash 文件 fg4. swf。 

@ 设置 主 框 架 页 面 的 【滚动 ] 方 式 为 “自动 *,【 源 文件 为 本 地 站 点 中 的 网 页 文件 


main. html。 
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@ 将 三 个 框架 网 页 的 页 面 属性 【左边 界 】【 顶 部 边界 】【 边 界 宽度 】【 边 界 高 度 】 设 为 
0, 并 将 全 部 框架 文件 保存 在 本 地 站 点 中 。 

(2) 按照 样张 在 左 框架 中 绘制 270Xx460 像素 的 布局 表格 ,并 完成 下 列 要 求 。 

Oz 在 左 框架 的 布局 表格 中 从 上 至 下 分 别 绘制 270X170 像素 、270X140 像素 、270X 
150 像素 的 布局 单元 格 。 并 在 上 、 下 两 个 布局 单元 格 中 分 别 插入 Flash 文件 fg3. swf、fg5. 
Swf。 

@ 在 中 间 的 布局 表格 中 创建 一 个 表单 ,在 表单 的 第 1 行 插 入 文本 域 ,文本 域 的 标识 
为 “用 户 名 ”字符 宽度 3 为 20.【 最 大 字符 数 ] 为 20.【 类 型 ] 为 “单行 ”。 

@ 换行 后 ,再 插入 一 个 文本 域 ,文本 域 的 标识 为 密码”,【 字 符 宽度 ] 为 20.【 最 大 字符 
数 ] 为 20.【 类 型 ] 为 “密码 ”。 

@ 换行 后 ,在 表单 的 第 3 行 居中 插入 1 个 按钮 ,并 将 其 【标签 3 和 【动作 了 设置 为 “提交 
表单 ”。 

@ 设置 表单 的 [名 称 ] 为 “登录 ”.【 动 作为 读者 的 邮件 地 址 【方式 ] 为 POST。 

(3) 按照 图 6-3 所 示 的 样张 ,在 主 框架 中 绘制 510X460 像素 的 布局 表格 ,并 完成 下 列 
要 求 。 


图 6-3 index. html 网 页 的 样张 


@ 在 主 框 架 的 布局 表格 中 从 上 至 下 分 别 绘制 510X45 像素 的 布局 单元 格 ,3 个 510X 
110 像素 的 布局 单元 格 ,510 X45 像素 的 布局 单元 格 .中 间 3 个 布局 单元 格 之 间 间 隔 20 
像素 。 

@) 在 上 、 下 两 个 布局 单元 格 中 分 别 插入 图 像 文件 topbg. gif 和 bottombg. gif, 并 将 其 
宽度 放大 到 510 像素 。 

@ 将 每 个 510X110 像素 的 布局 表格 改 为 165X110 像素 和 315X110 像素 的 布局 表 
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格 ,并 在 修改 后 的 两 个 表格 左边 留 出 15 像素 的 间隔 。 

四 在 3 个 165X110 像素 的 布局 表格 中 分 别 插入 图 像 文件 tu10_3. jpg、tu5_3. jpg、 
tu2_3. jpg。 

@@ 将 word 文件 “ 焚 高 的 画 . doc” 中 的 3 段 文字 分 别 复制 到 3 个 315 X110 像素 的 布 
局 表格 中 ,并 设置 字体 为 宋体 , 字 的 大 小 为 2 号 ,颜色 为 白色 。 

(4) 用 模板 fangao 新 建 符合 下 列 要 求 的 网 页 文件 fgl. html, 并 将 此 文件 保存 本 地 站 
点 根 文件 夹 中 。 

Oz 将 doc 文 件 夹 中 “ 焚 高 的 故事 . doc” 的 文字 内 容 复制 到 网 页 文字 可 编辑 区 域 ,并 在 
模板 左 侧 上 面 两 个 图 像 可 编辑 区 域 中 ,分 别 插入 img 文件 夹 中 的 tu2_3. jpg 和 tul0_3. 
jpg, 在 模板 项 部 标题 可 编辑 区 域 输入 文字 * 焚 高 的 故事 ”。 

@ 附加 本 地 站 点 根 文件 夹 中 的 外 部 层 释 样式 表 文 件 format. css, 并 将 样式 title 作用 
于 网 页 标题 ,样式 format 作用 于 网 页 中 的 其 他 文字 .样式 filter 作用 于 图 像 文件 tu2_3. 
jpg 和 tul0_3. jpg。 

@ 在 网 页 中 最 后 一 段 文字 * 镶 板 画 ” 的 中 间 插 入 用 于 超级 链接 的 名 为 “aa” 的 锚 点 。 

@ 在 网 页 左下 角 最 后 1 个 图 像 可 编辑 区 域 中 ,插入 库 项 目 return。 

(5) 按照 下 列 要 求 设置 行为 和 超级 链接 。 

@ 给 网 页 主 框架 中 图 像 文件 tu10_3. jpg 添加 行为 ,鼠标 指针 指向 图 像 tu10_3. jpg 
时 ,显示 状态 栏 文字 “欢迎 光临 栖 高 名 画 网 站 !1”。 

@ 给 网 页 主 框架 中 图 像 文 件 tu5_3. jpg 添加 行为 ,双击 该 图 像 ,停止 播放 左 框架 中 的 
Flash 文件 fg5. swf; 单 击 该 图 像 ,开始 播放 左 框架 中 的 Flash 文件 fg5. swf。 

@) 编辑 库 项 目 return, 使 其 与 首页 index. html 建立 超级 链接 ,设置 【目标 了 为 
_parent ,并 更 新 整个 站 点 。 

@ 给 网 页 主 框 架 中 图 像 文 件 tu2_3. jpg 添加 超级 链接 , 单 击 此 图 像 时 链接 到 文件 
fgl. html 的 锚 点 “aa” 上 ,并 使 该 文件 在 新 的 浏览 器 窗口 中 显示 。 


3. 实验 的 参考 步骤 


1) 表单 和 表单 域 的 基本 操作 

(1) 创建 一 个 名 为 exe6-1. html 的 网 页 文件 ,选择 【修改 了 民 页 面 属 性 了 命令 ,设置 页 面 
背景 图 像 为 img 文件 夹 中 的 图 像 文 件 bg0013. jpg, 将 网 页 保存 在 本 地 站 点 下 。 

g@ 单 击 【 插 入 了 栏 的 [表单 3 选项 中 的 【表单 按钮 回 , 此 时 网 页 中 出 现 一 个 被 红色 虚线 
界定 的 区 域 , 即 在 网 页 编辑 区 中 生成 了 一 个 表单 区 域 。 

@ 单 击 红 色 虚 线 框 可 以 选中 表单 区 域 , 在 【属性 了 面板 中 可 设置 这 个 表单 区 域 的 
属性 。 

。 在 【表单 名 称 ] 文 本 框 中 输入 “表单 实例 ”; 

。 在 【动作 ] 文 本 框 中 输入 “mailto: 一 收 件 人 邮件 地 址 二 ”; 

。 在 [方法 J 下 拉 列 表 框 中 选择 [POST】 选 项 ,表示 表单 用 邮件 方式 发 送 。 

@ 将 光标 插入 红色 虚线 框 内 .输入 表单 的 标题 文字 “意见 反馈 ”, 并 在 【属性 面板 中 
完成 文字 的 格式 化 。 将 光标 插入 到 表单 合适 的 位 置 ,输入 标识 提示 文字 “您 的 姓名 : ”。 
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单 击 【插入 ] 栏 的 5 表单 3 选项 中 的 【文本 字段 了 按钮 下 ,就 可 在 表单 中 生成 一 个 文本 框 表 
单 域 。 
。 在 文本 字段 表单 域 的 【属性 了 面板 中 的 【文本 域 】 文 本 框 中 输入 文本 域 的 名 称 为 
“textfield1”, 系统 将 以 此 名 称 保存 文本 框 表单 域 中 的 内 容 ; 

。 在 【字符 宽度 了 文本 框 中 输入 表单 域 的 宽度 为 20; 

。 在 【类 型 ] 区 域 中 选择 文本 框 的 类 型 为 【单行 】。 

由 将 光标 插入 到 表单 合适 的 位 置 ,输入 单 选 按 钮 组 的 标识 文字 “您 的 性 别 : ”, 在 合 
适 的 位 置 插入 光标 ,然后 单 击 【 插 入 3 栏 的 [表单 〗 选 项 中 的 [ 单 选 按钮 按钮 加 .并 输入 这 
个 单 选 按钮 的 标识 文字 “ 男 ”。 

。 选中 这 个 单 选 按钮 ,在 其 [属性 了 面板 的 【 单 选 按钮 文本 框 中 输入 单 选 按钮 的 名 字 

“性 别 ”; 
。 在 F 选 定 值 ] 文 本 框 中 ,给 【 单 选 按 钮 3 赋值 * 男 ”; 
。 设置 【 单 选 按钮 3 的 [初始 状态 ] 为 【已 勾 选 3 状 态 ; 
用 同样 的 方法 添加 另 一 个 标识 为 “ 女 ” 的 单 选 按钮 ,将 其 选中 : 
。 在 【属性 了 面板 的 【 单 选 按钮 了 文本 框 中 输入 单 选 按钮 的 名 字 ”* 性 别 ”; 
。 在 【 选 定 值 ] 文 本 框 中 给 单 选 按钮 赋值 * 女 ”; 
。 并 设置 单 选 按钮 的 [5 初始 状态 3 汶 【 未 选中 3 状态 。 
@ 将 光标 插入 在 表单 合适 的 位 置 ,输入 下 拉 列 表 框 的 标识 文字 “您 的 职业 :“”, 然 后 
单 击 【 插 入 3 栏 的 [表单 3 选项 中 的 [列表 /菜单 3 按钮 国 . 此 时 表单 中 显示 一 个 很 小 的 下 拉 
列表 框 。 
。 双击 新 建 的 下 拉 列 表 框 ,在 【属性 3 面板 的 [列表 / 荣 单 ] 文 本 框 中 输入 下 拉 列 表 框 
的 名 称 为 work; 

。 在 【类 型 选项 区 中 设置 下 拉 列 表 框 的 类 型 汶 【 列 表 了 ,在 【高 度 】 文 本 框 中 设置 列表 
框 可 显示 的 行 数 为 5 行 ; 

。 不 选 【 允 许多 选 3 复 选 框 ( 若 选中 该 复 选 框 , 则 可 将 下 拉 列 表 框 设置 成 一 次 可 选择 
多 个 选项 ) ; 

。 单 击 【列表 值 ] 按 钮 ,可 以 进行 列表 设置 ,如 图 6-4 所 示 ; 

。 单 击 | 于 | 按钮 ,依次 添加 “工人 ”“ 农 民 ”“ 学 生 ”“ 干 部 ”"“ 教 师 ” 等 新 的 列表 选项 。 
在 【属性 了 面板 中 的 【初始 化 时 选 定 了 列表 中 ,会 显示 用 【列表 值 了 按钮 添加 的 列表 


图 6-4 【列表 值 3 对 话 框 
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项 目 。 

@ 用 同样 的 方法 可 创建 标识 文字 为 “您 的 最 高 学 历 ” 的 下 拉 列 表 框 ,操作 步骤 略 。 

@; 将 光标 插入 到 表单 合适 的 位 置 , 输 入 复 选 框 组 的 标识 文字 “您 的 爱好 ”, 然 后 单 击 
【插入 了 栏 的 [表单 3 选项 中 的 【 复 选 框 ] 按 钮 图 .并 输入 这 个 复 选 框 的 标识 文字 * 看 书 ”。 用 
同样 的 方法 分 别 添加 标识 文字 为 “音乐 "“ 旅 游 "“ 体 育 ” 的 复 选 框 。 

@@ 将 光标 插 和 人 到 表单 合适 的 位 置 ,输入 文本 框 的 标识 文字 “您 对 本 网 站 的 意见 : ”， 
然后 单 击 【 插 入 了 栏 的 【表单 3 选项 中 的 【文本 字段 】 按 钮 下 ,在 表单 中 生成 一 个 文本 框 表 
单 域 。 

。 在 文本 框 表 单 域 的 [属性 了 面板 中 的 【文本 域 ] 文 本 框 中 输入 文本 域 的 名 称 为 “文本 

域 2”, 系 统 将 以 此 名 称 保存 文本 框 表单 域 中 的 内 容 ; 

。 在 【字符 宽度 ] 文 本 框 中 输入 表单 域 的 宽度 为 80; 

。 在 【类 型 ] 中 选择 文本 框 的 类 型 为 【多 行 】; 

。 在 【 行 数 ] 文 本 框 中 输入 行为 10; 

。 在 【初始 值 ] 文 本 框 中 输入 表单 域 预先 设置 的 值 为 “请 您 发 表 浏 览 观感 ”; 

。 在 【换行 I 下拉 列 表 框 中 设置 多 行文 本 框 表单 域 的 换行 方式 为 【默认 】。 

@ 将 光标 插入 到 表单 合适 的 位 置 ,两 次 单 击 【 插 入 ] 栏 的 【表单 选项 中 的 [按钮 ] 按 
钮 , 便 可 在 表单 中 生成 两 个 按钮 。 

。 单 击 第 1 个 按钮 ,在 按钮 的 【属性 了 面板 的 【标签 3 文本 框 中 输入 “重新 改写 ”; 后 选 

中 【动作 了 单 选 区 域 中 的 【 重 设 表单 了 单 选 按钮 ,将 其 设置 为 复位 按钮 。 
。 单 击 第 2 个 按钮 ,在 【属性 了 面板 的 【标签 了 文本 框 中 输入 "提交 表单 ”, 然 后 选中 【 动 
作 了 单 选 区 域 中 的 【提交 表单 了 单 选 按钮 ,将 其 设置 为 提交 按钮 。 

0 预览 网 页 文件 ,将 文件 以 exe6-1. html 为 名 保存 在 My site 文件 夹 中 。 

(2) 创建 一 个 名 为 exe6-2. html 的 带 表单 域 检验 的 网 页 文件 。 

2) 网 页 扩展 管理 器 的 操作 题 

QO@ Dreamweaver 8 的 插件 可 以 用 于 拓展 Dreamweaver 8 的 功能 。 在 Dreamweaver 8 
中 , 搬 件 类 型 分 为 命令 (Command)、 对象 (Object) ,行为 (Behavior) 等 。 

现在 Internet 上 的 Dreamweaver 8 插件 层出不穷 .设计 者 可 以 在 很 多 网 站 上 下 载 各 
式 各 样 的 插件 ,而 且 Macromedia 公司 也 专门 在 自己 的 官方 网 站 上 开辟 了 Macromedia 
Exchange 栏目 ,在 那里 可 以 下 载 数 以 百 计 的 扩充 功能 。 

如 此 多 的 插件 要 逐一 安装 和 管理 也 是 一 个 不 小 的 问题 ,不 过 在 Dreamweaver 8 中 集 
成 了 功能 强大 的 扩展 管理 器 (Macromedia Extension Manager) .如 图 6-5 所 示 就 是 扩展 管 
理 器 在 开始 菜单 中 的 模样 。 

选择 Windows XP 操作 系统 的 【开始 人 所 有 程序 了 Macromedia 人 Macromedia 
Extension Manager] 命 令 ,如 图 6-5 所 示 或 在 Dreamweaver 8 中 选择 【命令 区 扩 展 管理 】 
命令 ,打开 Dreamweaver 8 的 【扩展 管理 器 】. 如 图 6-6 所 示 。 

【Macromedia 扩展 管理 器 3 从 操作 界面 上 来 看 可 以 分 为 三 部 分 : 顶端 是 菜单 栏 和 工 
有 具 按钮 ;中 间 的 列表 框 中 显示 已 经 安装 的 插件 名 称 、 版 本 、 类 型 等 信息 ; 底 端 显示 的 是 对 应 
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的 插件 介绍 或 说 明 。 


国 自述 文件 » 


加 keal si macronedia Dreamweaver 8 

加 YinRAR "| 国 macronedia Extension Nanager 
加 录 风 影音 5 ?有 目 四 macromedia Fireworks 8 

园 附件 »@ Hacronedia Flash 8 

加 管理 工具 » RB Macronedia Flash 8 Video Encoder 
加 启动 vB Macronedia Flash Flayer 8 


图 6-5 Windows XP 操作 系统 的 [开始 ] 麻 单 


了 Hacroaedia 扩展 管理 器 
文件 EE) 帮助 00 
本 | 会 | [Drewesvers 


Insertion Paul Davis 

Media Suite RealNetworks 
crolling Status Bar 用 Ravi Kumar. :>RigTechnologi 
WinTimer 0 为 


[Closes a Popup after a preset Delay. 


Access this Action from the Behaviors Palette, Studio YIT Flyout, 


图 6-6 Macromedia 扩展 管理 器 示意 图 


在 【Macromedia 扩展 管理 器 了 中 ,选择 [文件 了 民 安 装 扩展 了 命令 ,在 弹出 的 【选取 要 安 
装 的 扩展 3 对 话 框 中 选择 mxp 文件 夹 中 的 Dreamweaver 8 插件 wintime. mxp, 单 击 【 安 
装 ] 按 钮 便 可 将 该 插件 安装 到 Dreamweaver 8 中 。 安 装 择 件 后 ,必须 重新 启动 
Dreamweaver 8, 安 装 的 插件 才能 生效 。 

在 Dreamweaver 8 编辑 窗口 中 打开 网 页 文件 exe6-1. html, 选 择 [ 窗 口 3I【 行 为 ] 命 令 ， 
打开 【行为 】 了 面板 ,选中 层 , 单 击 卉 按钮 .在 【动作 了 菜单 中 选择 【Studio VIIY I 【Close 
Window Timer] 命 令 .在 KClose Window Timer】 对 话 框 的 KEnter Delay in Milleseconds】 
文本 框 中 输入 数值 3000, 如 图 6-7 所 示 , 单 击 【 确 定 ] 按 钮 确认 。 选 择 [ 事 件 ] 菜 单 中 的 
onLoad 为 默认 的 事件 。 

Close Window Timer 


Close Popup Window Timer 


Enter Delay in 
Milleseconds Bo0 _ _ 


1 second = 1000 milleseconds. If you want a delay of 2 
‘seconds, enter 2000 into the Delay Field 


Boece 


图 6-7 Close Window Timer 对 话 框 
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添加 的 行为 表示 在 浏览 器 中 打开 网 页 文件 exe6-1. html 3 秒 钟 后 会 弹出 一 个 提示 关 
闭 当 前 窗口 的 对 话 框 ,确认 后 关闭 当前 浏览 器 的 窗口 。 

预览 网 页 ,观察 结果 。 

@ 用 上 题 同样 的 方法 ,在 Dreamweaver 8 的 〖 扩 展 管理 器 ] 中 ,安装 mxp 文件 夹 中 的 
Dreamweaver 8 的 插件 Scrolling Status Bar. mxp, 该 插件 的 功能 是 在 浏览 器 的 状态 栏 中 
依次 显示 多 种 状态 栏 文 本 内 容 。 安 装 插件 后 重新 启动 Dreamweaver 8 使 插件 生效 。 

在 Dreamweaver 8 编辑 窗口 中 打开 网 页 文件 exe6-1. html, 单 击 【插入 3 栏 的 
〖【Scrolling Status Bar】 选 项 中 的 [Scrolling Status Bar】 按 钮 .在 弹出 的 [Scrolling_Status_ 
Bar】 对 话 框 中 输入 题目 要 求 的 状态 栏 文字 ,如 图 6-8 所 示 。 


Scrolling Status Bar 


Enter Your Text To be Scrolled: 


Seroll Text 1 |[ 书 一 一 人 类 的 朋友 ， 精神 的 粮食 
Seroll Text 2 硬 书 不 难 ， 能 看 为 难 
Seroll Text 3， [看 书 不 难 ,能 读 为 难 
Seroll Text 4: [读书 不 难 ， 能 用 为 难 
Seroll Text 5 [二 用 不 难 , 祝 记 为 难 ] [ElseAa 


IE you would like to have more scrolling a dit the seript thet is 
en your source code at 


add one more scrolling text, 
even more scrolling 


numbers are not in sequence, it will produce an error. 


IE you would like to display the status bar blank in between scrolling 
texts, simply leave the appropriate textboxes above blank. 

Developed By : 用 Ravi Kumar 

end Your Conments to : ravi_mrkl@hotmail. com 


图 6-8 【Scrolling_Status_Bar】 对 话 框 


单 击 【 确 定 了 按钮 确认 ,预览 网 页 观察 其 结果 后 保存 文件 。 

@ 在 Word 中 打开 doc 文件 夹 中 文件 “字符 围绕 鼠标 . doc”, 将 其 中 的 代码 选中 ,然后 
复制 到 剪贴 板 。 

在 Dreamweaver 8 编辑 窗口 中 打开 网 页 文件 exe6-1. html, 单 击 工 具 栏 中 的 【显示 代 
码 视图 按钮 回民 到 .将 编辑 模式 切换 到 代码 视图 方式 ,如 图 6-9 所 示 。 

将 剪贴 板 中 "字符 围绕 鼠标 ?的 代码 粘贴 到 光标 所 在 的 过 head 二 区 域 中 ,预览 网 页 观 
察 结 果 后 保存 文件 。 

3) 网 页 综合 练习 题 

操作 略 。 


4. 实验 后 的 思考 题 


(1) 表单 的 主要 作用 是 什么 ”标准 的 表单 域 有 哪 几 种 ?它们 的 功能 分 别 是 什么 ? 
(2) 表单 中 [提交 3 按钮 和 【 重 千 3 按钮 的 作用 是 什么 ? 如 何 添加 这 两 个 按钮 ? 
(3) 如 何 利 用 E-mail 发 送 表 单数 据 ? 


64 一 一 一 一 一 一 一 一 一 电子 商务 网 站 建设 实验 指导 (第 2 版 ) 


《IDOCTYPE HTIL PUBLIC “~-//W3C//DID HTIL 4.0 Transitional/AEN > 


四 固 
<HIWL> 
| <HEAD> 
区 SCRIPT language=javascript> 
4 I——//This is a JS program for Sword Jir = JoyF homepage. All rights reserved. 
甘 
六 
3 function locate() El 
全 { cxr=window. event.x; 
ns cy=window. event. y:; 


% 
document. omousemove=locate; 
function follow(i) 

Var x 

if (i<4)x=cx-50+i#10 


else x 
war y=cy-20+NMath. floor (Math. random() *40) ; 
weval (“word”+i) ; 

with(w. style) 


left=x. 
top=y.t 


ring ()+"px”: 
tring ()+°px”; 


ETTIEIT rd 


} 


function show(i) 
{ 


29 var weval (“word"+i); 
30 with(w. style) 

31 { 

32 visibility="visible”; 

33 s=parseInt (fontSize) : 

3 if£ (s>=200) s-=100; 

35 else if(s>908&s<=100) 


37 s-=85; 


3 clearInterval (val) 
39 if (i<5)val=setInterval (“show("+(i+1)+")", 20); 


a0 1 

dl fontSize=s; 
42 } 

43 

rl } 


图 6-9 代码 视图 编辑 方式 


(4) 创建 表单 后 ,为 什么 还 要 创建 表单 处 理 程序 ? 如 何 创建 这 种 程序 ? 
(5) 在 【Macromedia 扩展 管理 器 ] 中 .【 安 装 扩展 3 和 [导入 扩展 3 的 区 别 是 什么 ?【〖【 提 
交 扩展 3 的 作用 是 什么 ? 
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网 页 制作 的 综合 实验 


实验 ( 


1. 实验 的 目的 与 要 求 
复习 巩固 网 页 制作 和 图 形 图 像 处 理 的 知识 点 。 
2. 实验 的 操作 内 容 


下 面 给 出 两 套 综合 实验 题 。 
1) 综合 实验 题 1( 可 作为 期 中 考试 或 测验 试题 ,素材 和 参考 答案 都 存放 在 ch07 文件 
夹 内 ) 
注意 : 
。 实验 前 可 将 素材 文件 夹 复制 到 本 地 计算 机 的 硬盘 上 ,改名 为 My site, 并 设 为 本 地 
站 点 。 
。 实验 时 所 有 新 生成 的 文件 ,如 没有 特别 指明 均 存 放 在 本 地 站 点 根 文件 夹 My site 
中 。 答 题 时 所 用 到 的 图 像 文件 ,如 没有 特别 指明 均 存 放 在 本 地 站 点 的 img 文件 
类 第 沁 
。 在 网 页 的 首页 ( 即 index. html) 的 合适 位 置 添加 实验 者 的 姓名 、 班 级 、 学 号 ,文字 的 
字体 、 字 号 、 颜 色 自 定 。 
。 若 计算 机 中 无 考题 中 用 到 的 字体 ,实验 者 可 自选 字体 答题 。 
图 像 处 理 (30%) 
(1) 将 img 文件 夹 中 的 图 像 t8. jpg 缩小 为 77X77 像素 ,并 增加 宽度 为 3 像素 ,颜色 
为 站 996633, 圆 角 值 为 30, 大 小 为 79X79 的 圆 角 和 矩形 外 框 线 。 删 除 圆 角 和 矩形 外 多 余 的 图 
像 ,以 t8_1. gif 为 名 将 图 像 文件 保存 在 img 文件 夹 中 。 
(2) 将 图 像 文 件 t8_1. gif 的 透明 度 改 为 50%, 以 t8_2. gif 为 名 将 图 像 文 件 保存 在 
img 文件 夹 中 。 
(3) 在 Fireworks 中 ,绘制 颜色 为 #CCCC99, 大 小 为 170X170 像素 的 正方 形 , 并 添 
加 效果 :【 斜 角 与 浮雕 3IK〖 内 斜 角 3I【 皱 纹 】 ,效果 的 宽度 为 12 像素 ,其 他 参数 默认 。 以 
F1l1. jpg 为 名 将 文件 保存 在 img 文件 夹 中 。 
(4) 将 img 文件 夹 中 的 图 像 文件 shu4_1. jpg 缩小 为 140 X140 像素 后 ,以 shu4. jpg 
为 文件 名 保存 在 img 文件 夹 中 。 
(5) 打开 img 文件 夹 中 的 逐 帧 图 像 文件 shu. png, 在 第 1 和 第 2 帧 之 间 插 入 一 帧 ,并 


分 别 先 后 居中 导入 Fl1.jpg 和 shu4. jpg。 再 将 逐 帧 图 像 文件 每 一 帧 的 播放 速度 改 为 150/ 
100 秒 。 

(6) 在 逐 帧 图 像 文 件 shu. png 的 第 7 帧 仿照 第 1 帧 的 文字 样式 ,输入 带 阴影 的 文字 
“智慧 ” ,文字 要 求 如 下 : 

@ 字体 为 “隶书 ”, 大 小 为 96 像素 ,居中 对 齐 。 

@ 文字 颜色 为 #FFFF99 ,文字 阴影 的 颜色 为 #993300。 

@ 播放 逐 帧 图 像 文 件 , 然 后 将 处 理 好 的 文件 以 shu. gif 为 名 保存 在 img 文件 夹 中 ,并 
删除 逐 帧 图 像 文 件 shu. png。 

动画 制作 (25%) 

(1) 在 Flash 中 ,设置 动画 文档 的 尺寸 为 800X 80 像素 , 帧 频 为 10 帧 / 秒 , 背 景 颜色 为 
划 CCCC99。 并 以 库 方式 打开 swf 文件 夹 中 的 文件 shu. fla, 用 库 中 图 形 元 件 tt 制作 由 左 
向 右 的 运动 渐变 的 动画 ,动画 长 度 为 800 帧 ,将 该 动画 文件 以 shul. swf 为 名 保存 在 本 地 
站 点 的 swf 文件 夹 中 。 

(2) 打开 swf 文件 夹 中 的 文件 shu2. fla, 添 加 一 个 新 的 层 ,在 新 的 层 中 完成 下 列 要 求 
的 动画 。 

Oz 在 第 45 帧 处 添加 关键 帧 ,居中 输入 文字 “书籍 ”, 字 体 为 “方正 水 柱 体 ”, 大 小 为 70 
像素 ,颜色 为 #993300,“ 书 籍 ” 文 字 延 续 10 帧 。 

@ 从 第 55 帧 起 到 第 70 帧 ,完成 文字 “书籍 ”形状 渐变 为 文字 “力量 ”。 

@ 从 第 71 帧 起 到 第 80 帧 ,文字 “力量 ”的 不 透明 度 由 100% 渐 变 为 0。 

@ 在 第 81 帧 输入 文字 “知识 一 力量 ”, 并 延续 到 第 100 帧 ,文字 的 大 小 及 样式 自 定 。 

@@ 将 该 动画 文件 以 shu2. swf 为 名 保存 在 本 地 站 点 的 swf 文件 夹 中 。 

(3) 在 Flash 中 ,设置 动画 文档 的 尺寸 为 170X170 像素 , 帧 频 为 10 帧 / 秒 , 并 完成 下 
列 要 求 的 动画 。 

JD 在 第 1 层 的 第 1 帧 处 ,居中 导入 img 文件 夹 中 图 像 文件 F1. jpg, 使 其 延续 到 第 30 
帆 ,并 将 其 锁 住 。 

@ 在 第 2 层 的 第 1 帧 处 .导入 img 文件 夹 中 的 shu4. jpg 文件 ,在 第 3 层 的 第 1 帧 处 
居中 输入 文字 “ 书 ”, 字 体 为 “黑体 ”, 大 小 为 90 像素 ,颜色 为 #000000。 

@ 用 第 2 层 的 图 像 和 第 3 层 的 文字 制作 成 长 度 为 30 帧 的 遮 单 效果 的 动画 ,第 2 层 
的 图 像 为 水 平方 向 移动 的 运动 渐变 动画 ,文字 层 为 遮 单 层 。 

@ 将 该 动画 文件 以 shu3. swf 为 名 保存 在 本 地 站 点 的 swf 文件 夹 中 。 

(4) 打开 swf 文件 夹 中 的 文件 shu4. fla; 添 加 一 个 新 的 名 为 “导入 逐 帧 动画 ”的 场景 ， 
在 新 的 场景 中 导入 修改 后 的 逐 帧 动画 shu. gif。 测 试 动画 后 以 shu4. swf 为 名 将 保存 文件 
在 本 地 站 点 的 swf 文件 夹 中 。 

网 页 设计 (45%) 

(1) 按照 如 图 7-1 所 示 的 样张 ,创建 符合 下 列 要 求 的 网 页 首页 文件 index. html, 并 将 
此 文件 保存 本 地 站 点 根 文件 夹 中 。 

@O 网 页 用 img 文件 夹 中 的 文件 bg0040. gif 设置 背景 图 像 , 并 设置 其 他 必需 的 页 面 
属性 。 
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| 文件 EE) 编辑 E) 查看 QD 收藏 入 工具 GD) 登录 加 ) 帮助 0D 
丛 无 标题 文档 | 


< 
名 有 NM 天 居留 言 [系统 可 用 资源 : 61% 其 ] Eile:777C:/ 图 形 处 理 /test/B 郑 /index htn# 


图 7-1 实验 题 1 的 首页 样张 


@ 在 网 页 中 按 样张 绘制 800 X600 像素 的 布局 表格 ,在 布局 表格 中 绘制 800X80 像 
素 的 页 面 顶部 的 布局 单元 格 ,并 在 其 中 插入 Flash 文件 shul. swf。 

@ 在 网 页 左 侧 按 样 张 绘 制 4 个 大 小 为 79X79 像素 的 布局 单元 格 , 并 在 其 中 分 别 插 
入 鼠标 经 过 图 像 ,其 原始 图 像 文件 分 别 为 t2_2. gif、t3_2. gif、t4_2. gif、t7_2. gif, 鼠标 经 过 
图 像 文件 分 别 为 t2_1. gif\t3_1. gif\t4_1. gif\t7_1. gif。 

@ 在 网 页 右 侧 按 样 张 绘制 两 个 大 小 为 170X170 像素 的 布局 单元 格 , 在 其 中 一 个 布 
局 单元 格 中 插入 img 文件 夹 中 新 修改 后 的 逐 帧 图 像 文件 shu. gif。 

@) 在 网 页 右 侧 另 一 个 布局 单元 格 中 ,分 别 插入 大 小 为 170 X170 像素 的 4 个 层 
Layerl、Layer2、Layer3、Layer4 ,在 层 中 分 别 插入 文件 f1. jpg、shu2. swf、shu3. swf、shu4. 
swf ,并 把 4 个 大 小 一 致 的 层 和 至 放 在 一 起 。 

人 @ 预览 网 页 后 ,以 index. html 为 名 将 网 页 保存 在 本 地 根 文件 夹 中 。 

(2) 用 photo 子 文件 夹 中 的 图 像 创 建 网 站 图 像 相册 ,其 要 求 如 下 。 

@ 网 站 相册 标题 为 “ 书 一 一 人 类 的 精神 粮食 ”, 省 略 副 标题 。 

@ 页 面 图 像 的 缩 略图 尺寸 为 100X100 像素 ,每 行列 数 为 4 列 , 缩 略图 像 文件 格式 为 
.JPEG. 

@ 初始 图 像 文件 夹 为 photo 子 文件 夹 ,目标 图 像 文件 夹 为 本 地 站 点 的 根 文件 夹 。 

@ 其 他 参数 默认 ,网 站 相册 的 网 页 用 img 文件 夹 中 的 文件 bg0029. jpg 设置 背景 图 
像 .并 设置 其 他 必需 的 页 面 属性 。 

@) 在 页 面 合 适 的 位 置 插 入 图 像 文 件 return. gif, 并 为 该 文件 建立 返回 首页 index. 
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html 的 超级 链接 。 

@ 网 页 文件 以 indexl. html 为 名 保存 在 本 地 站 点 的 根 文件 夹 中 。 

(3) 创建 符合 下 列 要 求 的 网 页 文件 book. html, 并 将 此 文件 保存 本 地 站 点 的 根 文件 
夹 中 。 

@ 设置 网 页 背景 图 像 为 img/bg0002_1.jpg: 以 及 其 他 必要 的 网 页 属性 。 

@ 将 bookl. doc 中 的 文字 内 容 复 制 到 网 页 文字 区 域 ,在 顶部 标题 区 域 输入 文字 
“ 书 一 一 人 生 的 伴侣 ,知识 的 源泉 ”, 并 在 网 页 右上 角 插 入 img 文件 夹 中 的 图 像 文 件 
shu3. jpg。 

@ 在 本 地 站 点 根 文 件 夹 中 创建 外 部 层 和 到 样式 表 文 件 format. css, 在 该 文件 中 创建 样 
式 . stylel ,字体 为 “华文 行 楷 ” ,颜色 为 红色 ,大 小 为 24 像素 ,作用 于 网 页 标题 。 在 该 文件 
中 创建 样式 . style2 ,字体 为 “华文 新 魏 ”, 颜 色 为 蓝 色 , 大 小 为 18 像素 ,作用 于 网 页 文字 。 
链接 外 部 层 秋 样式 表 文 件 ellipse. css, 将 其 作用 于 图 像 文 件 shu3. jpg。 

@ 在 网 页 中 最 后 一 段 的 文字 “清朝 张 潮 先 生 ” 中 间 插 入 用 于 超级 链接 的 名 为 aa 的 
锚 点 。 

@ 在 页 面 左下 角 的 层 中 插入 图 像 文件 return. gif ,并 用 该 图 像 建立 返回 首页 index. 
html 的 超级 链接 。 

(4) 打开 网 页 文件 index. html, 按 下 列 要 求 给 网 页 添加 行为 和 超级 链接 。 

OO 给 网 页 左 侧 第 1 个 鼠标 经 过 图 像 添 加 行为 : 双击 该 图 像 , 停 止 页 面 项 部 的 Flash 
文件 shul. swf 播放 ; 单 击 该 图 像 , 开 始 播放 页 面 项 部 的 Flash 文件 shul. swf。 

@ 给 网 页 左 侧 第 2 个 鼠标 经 过 图 像 添加 行为 : 当 鼠 标 指针 指向 该 图 像 时 显示 层 
Layer2 ,此 时 可 以 看 到 播放 的 文件 shu2. swf; 当 鼠 标 指针 从 该 图 像 上 移 开 时 ,显示 层 
Layerl 中 的 图 像 文件 人 1. jpg。 单 击 此 图 像 时 链接 网 站 相册 文件 indexl. html。 

@ 给 网 页 左 侧 第 3 个 鼠标 经 过 图 像 添 加 行为 : 当 鼠 标 指针 指向 该 图 像 时 显示 层 
Layer3 ,此 时 可 以 看 到 播放 的 文件 shu3. swf; 当 鼠 标 指 针 从 该 图 像 上 移 开 时 ,显示 层 
Layerl 中 的 图 像 文 件 人.jpg。 单 击 网 页 左 侧 第 3 个 鼠标 经 过 图 像 时 链接 book. html 文 
件 中 的 锚 点 aa。 

@ 给 网 页 左 侧 第 4 个 鼠标 经 过 图 像 添 加 行为 : 当 鼠 标 指针 指向 该 图 像 时 显示 层 
Layer4 ,此 时 可 以 看 到 播放 的 Flash 文件 shu4. swf; 当 鼠标 指针 从 该 图 像 上 移 开 时 ,显示 
层 Layerl 中 的 图 像 文 件 日 .jpg。 单 击 网 页 左 侧 第 4 个 鼠标 经 过 图 像 时 在 新 的 浏览 器 窗 
口中 打开 被 链接 的 网 页 文件 book. html。 

2) 综合 实验 题 2 

(1) 参考 如 图 7-2 所 示 的 样张 .创建 符合 下 列 要 求 的 网 页 首页 文件 index. html, 并 将 
此 文件 保存 在 本 地 站 点 的 根 文件 夹 中 。 

@ 网 页 用 img 文件 夹 中 的 文件 bg0035. jpg 设置 背景 图 像 . 并 设置 其 他 必需 的 网 页 
页 面 属性 。 

@ 在 网 页 中 按 图 7-2 所 示 的 样张 绘制 800X600 像素 的 布局 表格 ,在 布局 表格 顶部 画 
为 800X80 像素 的 布局 单元 格 ,并 在 其 中 插入 Flash 文件 camp. swf。 

@) 在 网 页 左 侧 按 图 7-2 所 示 样 张 绘制 3 个 大 小 为 103X76 像素 的 布局 单元 格 ,并 在 
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图 7-2 实验 题 2 的 首页 样张 


其 中 分 别 插 人 鼠标 经 过 图 像 ,其 原始 图 像 为 tl_1. gif、t2_1. gif、t3_1. gif, 鼠 标 经 过 的 图 像 
出 
@ 在 网 页 右上 方 按 图 7-2 所 示 的 样张 绘制 1 个 大 小 为 290X220 像素 的 布局 单元 格 ， 
在 其 中 插入 frame. gif, 并 按 下 列 要 求 编辑 该 图 像 文 件 。 
。 在 第 一 帧 前 面 插入 一 个 新 的 帧 ,在 该 帧 上 画 出 颜色 为 # FFFFCC, 大 小 为 290X 
220 像素 的 矩形 ,并 添加 效果 :【 斜 角 与 浮雕 了 了 人工 内 斜 角 了 区 第 1 帧 〗, 其 宽度 为 7 像 
素 ,其 他 参数 默认 ; 
。 在 新 的 帧 上 居中 输入 带 阴影 的 文字 “校园 春色 ”, 字 体 为 “隶书 ”, 大 小 为 70 像素 ， 
文字 颜色 为 #FF0000 ,文字 阴影 的 颜色 为 #333333, 居 中 对 齐 ; 
。 将 逐 帧 动画 的 每 一 帧 播放 速度 改 为 100/100 秒 , 播 放逐 帧 图 像 文件 后 返回 。 
@ 将 网 页 文件 以 index. html 为 名 保存 在 本 地 站 点 中 。 
(2) 用 photo 子 文件 夹 中 的 图 像 创 建 网 站 相册 ,其 要 求 如 下 。 
Q@ 网 站 相册 标题 为 “校园 景色 ”, 省 略 副标题 。 
@ 页 面 图 像 的 缩 略 图 尺寸 为 100X100 像素 ;每 行列 数 为 4 列 ; 缩 略图 像 文件 格式 为 
“JPEG。 
@ 初始 图 像 文 件 夹 为 photo 的 子 文件 夹 ,目标 图 像 文件 夹 为 本 地 站 点 的 根 文件 夹 。 
@ 其 他 参数 默认 ,用 img 文件 夹 中 的 文件 bg0000. jpg 设置 相册 首页 的 背景 图 像 。 
@ 在 页 面 合 适 的 位 置 绘制 一 个 层 , 在 层 中 插入 图 像 文 件 return. gif ,并 为 该 文件 建立 
返回 首页 index. html 的 超级 链接 。 
@ 将 网 页 文件 以 indexl. html 为 名 保存 在 根 文件 夹 中 。 
(3) 创建 符合 下 列 要 求 的 网 页 文件 sh. html, 并 将 此 文件 保存 在 本 地 站 点 的 根 文件 夹 
中 。 
Qa 绘制 布局 表格 和 布局 单元 格 。 将 根 文件 夹 中 sh. doc 的 三 段 文字 内 容 复 制 到 网 页 
上 中 、 下 三 个 布局 单元 格 中 。 
@ 在 网 页 第 一 段 右 侧 和 第 三 段 的 左 侧 分 别 插 入 图 像 文 件 shl. jpg 和 sh2. jpg, 在 网 
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页 顶部 输入 标题 文字 "上海 历史 简介 ”。 

@ 在 网 页 中 最 后 一 段 的 文字 ”……… 会 铺天盖地 地 迎面 扑 来 "中间 插 入 用 于 超级 链接 
的 名 为 aa 的 锚 点 。 用 代码 方式 添加 网 页 背景 音乐 ,音乐 文件 为 music. mid。 

提示 : 


一 bgsound src= "音乐 文件 名 ”loop = " -1 一 


@ 用 页 面 左下 角 图 像 文件 sh2. jpg 建立 返回 首页 index. html 的 超级 链接 。 

(4) 打开 首页 文件 index. html, 并 完成 下 列 要 求 : 

za 在 网 页 右 下 方 按 图 7-2 所 示 的 样张 绘制 1 个 大 小 为 290X170 像素 的 布局 单元 格 ， 
在 其 中 插入 圆 角 矩形 的 图 像 framel. gif。 在 该 圆 角 和 矩形 图 像 处 ,采用 层 和 时 间 轴 技术 制 
作 滚 动 字 幕 。 滚 动 字 幕 中 的 文字 为 book. doc 中 的 文字 (“藏书 不 难 ,能 看 为 难 ;看 书 不 难 ， 
能 读 为 难 ;读书 不 难 , 能 用 为 难 ;能 用 不 难 , 能 记 为 难 。”) 。 

@ 给 网 页 左 侧 第 1 个 鼠标 经 过 图 像 添加 行为 。 当 鼠标 指针 指向 该 图 像 时 ,播放 滚动 
字幕 的 时 间 轴 动画 ; 当 鼠 标 指针 从 该 图 像 上 移 开 时 ,停止 播放 滚动 字幕 的 时 间 轴 动画 。 

@@ 给 网 页 左 侧 第 2 个 鼠标 经 过 图 像 添 加 行为 。 双 击 该 图 像 , 停 止 页 面 右 侧 的 Flash 
文件 camp. swf 播放 ; 单 击 该 图 像 ,开始 播放 页 面 右 侧 的 Flash 文件 camp. swf。 

@ 建立 超级 链接 。 当 单 击 网 页 左 侧 第 2 个 鼠标 经 过 图 像 时 ,在 新 的 浏览 器 窗口 中 显 
示 被 链接 的 网 站 相册 文件 indexl. html。 

给 网 页 左 侧 第 3 个 图 像 鼠 标 经 过 建立 销 点 链接 ,被 链接 的 对 象 为 hz. html 文件 中 
的 铺 点 aa, 并 使 得 被 链接 的 网 页 在 原来 的 浏览 器 窗口 中 显示 。 

@ 预览 网 页 后 ,将 网 页 文件 index. html 保存 在 本 地 站 点 中 。 


3. 实验 的 参考 步骤 


1) 综合 实验 题 1 

注意 : 

图 像 处 理 和 Flash 动画 设计 不 属于 本 教材 的 教学 内 容 , 实 验 中 这 部 分 题目 可 以 不 做 。 
在 第 3 题 网 页 设计 中 可 直接 利用 本 实验 result 文件 夹 中 已 制作 完成 的 图 像 和 动画 文件 作 
为 网 页 元 素 。 

图 像 处 理 (30% ) 

(1) 启动 Fireworks, 打 开 img 文件 夹 中 的 图 像 t8. jpg, 按 题 意 要 求 编辑 该 图 像 文件 。 

@ 选择 【修改 3I【K 变 形 3I【 数 值 变 形 ] 命 令 ,在 【数值 变形 对 话 框 的 下 拉 列 表 框 中 选择 
【调整 大 小 3 选项 ,在 图 像 宽 度 和 高 度 文本 框 中 分 
别 输 入 77 像素, 单 击 【确定 3 按钮 将 图 像 t8. jpg 缩 
小 为 77X77 像素 ,如 图 7-3 所 示 。 

@) 选择 工具 箱 中 【 圆 角 和 矩形 了 工具 ,并 在 【 属 加 J 
性 了 面板 中 设置 以 下 参数 ,如 图 7-4 所 示 。 


。 在 [ 宽 ] 和 [高 ] 文 本 框 中 分 别 输入 79 像素 ;| 中 RE 滴 吕 


”设置 【填充 颜色 ] 为 “# FFFFFF”,【 填 充 类 i 
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圆 角 矩形 移 | 无 图 | 哇 |l: | 图 |: 避 亲 条 化 ”| 回 | | 加 [1oo | 圈 [ 正 党 国 @ 
= | 边缘 :| 浓 除 浴血”v 上 |~ 边 络 :| . |o 图 
宽 |79 | x 纹理 :|DNA v0 _|~ | 化 理 :|pNa 回 。 属 
高 :[79| | 大 | 中 透明 a 


图 7-4 圆 角 矩 形 的 【属性 了 面板 


别 ] 为 “无 ”,【 线 条 颜色 3 为 #996633.【 笔 尖 大 小 ] 为 3 像素 。 

@ 在 Fireworks 的 状态 栏 中 将 图 像 显示 比例 设 为 400%, 用 工具 栏 中 的 [橡皮 擦 ] 工 
具 擦 除 圆 角 和 矩形 外 多 余 的 图 像 ,然后 将 显示 比例 恢复 为 100%% ,选择 【修改 了 民 画 布 了 民 符 
合 画 布 了 命令 ,将 画布 调整 为 与 图 像 同样 大 小 。 

@ 选择 [文件 了 代 导 出 向 导 3 命 令 ,在 【导出 预览 3 对 话 框 的 [选项 3 选项 卡 中 ,设置 图 像 
【格式 了 为 GIF ,在 左下 方 【请 选择 透明 效果 类 型 3】 下拉 列 表 框 中 选择 【Alpha 透明 选项, 目 
的 是 使 被 [橡皮 擦 ] 工 具 擦 出 的 图 像 4 个 角 的 部 分 为 透明 色 ,如 图 7-5 所 示 。 

@@ 单 击 【 导 出 3 按钮 ,以 t8_1. gif 为 名 将 图 像 文件 保存 在 img 文件 夹 中 。 


团 | 攻 | 区 


回 删 除 未 使 用 颜色 到 ) 
口交 财 四 ) Re 国 占 是 | 国 | wiv 下 
[ 导出 于 ) ] 确定 取消 CC) 


图 7-5 ”图像 [导出 预览 ] 对 话 框 
(2) 将 图 像 文件 t8_1. gif 的 透明 度 改 为 50%, 以 t8_2. gif 为 名 将 图 像 文件 保存 在 
img 文件 夹 中 。 


Oz 选择 [窗口 3I【 层 2 命令 或 按 F2 键 .打开 【层面 板 。 按 住 Shift 键 ,并 选中 位 图 和 圆 
角 边 框 两 个 图 层 , 如 图 7-6 所 示 。 


@ 将 【层面 板 左 上 和 角 的 对 象 的 不 透明 性 改 为 50, 以 t8_2. gif 为 名 将 图 像 文件 保存 在 
img 文件 夹 中 。 


(3) 按 题 意 制作 图 像 文 件 Fl. jpg ,操作 步骤 如 下 。 
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@ 选择 [文件 3I【 新 建 ] 命 令 , 打 开 【 新 建文 
档 3 对 话 框 ,设置 画布 的 颜色 为 【透明 】 .画布 的 
【宽度 ] 和 [高 度 3 为 170 像素 的 正方 形 . 单 击 【 和 矩 
形 3 工 具 并 设置 [填充 颜色 为 # CCCC99。 选 中 
画 好 的 矩形 。 

@) 在 【属性 了 面板 中 单 击 西 按 钮 ,添加 效 
果 :【 斜 角 与 浮雕 YI【 内 和 斜 角 】I【 皱 纹 】 ,其 宽度 为 
12 像素 ,其 他 参数 默认 。 

@ 选择 [文件 】I【 导 出 向 导 ] 命 令 , 在 【导出 图 7-6 【层面 板 及 图 像 对 象 
预览 3 对 话 框 的 [选项 选项 卡 中 ,设置 图 像 [ 格 
式 ] 为 JPEG, 单 击 【 导 出 按钮 ,以 Fl. jpg 为 名 将 文件 保存 在 img 文件 夹 中 。 

(4) 将 img 文件 夹 中 的 图 像 文件 shu4_1. jpg 缩小 为 140X140 像素 后 以 shu4. jpg 为 
文件 名 保存 在 img 文件 夹 中 ,操作 参考 第 (1) 题 操作 步骤 。 

(5) 按 题 意 要 求 编辑 逐 帧 图 像 文件 shu. png ,操作 步骤 如 下 。 

@D 选择 [文件 了 攻打 开 了 命令 ,在 【5 打开 对话 框 中 选中 img 文件 夹 中 的 逐 帧 图 像 文件 
shu. png 将 其 打开 。 

@) 选择 [窗口 3 工 帧 3 命令 .打开 【 帧 3 面板 ,选中 第 1 帧 , 单 击 【 帧 面板 右上 角 的 按钮 
国 . 在 弹出 菜单 中 选择 [添加 帧 3 命令 ,在 【添加 帧 3 对 话 框 中 设置 【在 当前 帧 之 后 3 插 人 1 
帧 ,在 第 1 帧 后 添加 一 个 新 帧 。 

@ 选择 [文件 3IK 导 入 3 命令 ,并 分 别 居中 导入 图 像 文 件 Fl1.jpg 和 shu4. jpg。 

(6) 按 题 意 要 求 继续 编辑 逐 帧 图 像 文件 shu. png ,操作 步骤 如 下 。 

Q@ 打开 [ 帧 ] 面 板 , 选 择 逐 帧 图 像 文件 shu. png 的 第 7 帧 , 单 击 工 具 栏 中 的 [文本 ] 工 
具 ,选择 【文本 【编辑 器 3 命令 ,打开 [编辑 器 面板 ,仿照 第 1 帧 的 文字 样式 ,输入 字体 为 
“隶书 ”, 大 小 为 96 像素 ,文字 颜色 为 #FFFF99, 居 中 对 齐 的 文字 “智慧 ”。 

@ 选中 文字 对 象 ,选择 [ 编 辑 3I【 克 隆 ] 命 令 将 文字 对 象 再 复制 一 份 。 将 下 层 的 文字 
选中 ,在 【编辑 器 3 中 将 其 颜色 改 为 并 993300。 

@@ 在 【 帧 3 面板 中 单 击 第 1 帧 , 按 住 Shift 键 单 击 最 后 一 帧 ,选中 全 部 帧 。 双 击 【 帧 3 面 
板 右边 【 帧 延 时 3 编辑 区 域 , 将 帧 延 时 参数 改 为 150/100 秒 。 

@ 单 击 Fireworks 文档 窗口 状态 栏 中 的 【播放 按钮 区. 播放 逐 帧 图 像 文件 ,然后 将 
处 理 好 的 文件 以 shu. gif 为 名 保存 在 img 文件 夹 中 。 

动画 制作 (25%) 

(1) 按照 题 意 创建 动画 文件 shul. swf, 操 作 步 又 如 下 。 

中 启动 Flash 8, 选 择 【[ 修 改 了 区 文档 了 命令 .打开 【文档 属性 了 对 话 框 , 设 置 动画 文档 的 
【尺寸 ] 为 800X80 像素.【 帧 频 ] 为 10 帧 / 秒 .【 背 景色] 为 并 CCCC99 。 

@ 选择 [文件 3IK 导 入 3I【 打 开外 部 库 ] 命 令 .在 【作为 库 打开 对话 框 中 选择 swf 文件 
夹 中 的 文件 shu. fla, 以 库 方式 打开 该 文件 的 库 , 如 图 7-7 所 示 。 

@ 将 库 中 图 形 元 件 tt 的 实例 拖 动 到 编辑 区 ,使 图 形 元 件 tt 的 实例 与 舞台 的 左边 缘 
对 齐 , 如 图 7-8 所 示 。 
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@ 选中 时 间 轴 的 第 800 帧 右 击 , 在 快捷 
菜单 中 选择 【搬入 关键 帧 3 命令 在 第 800 帧 处 
插入 关键 帧 ,用 鼠标 拖 动 图 形 元 件 tt 的 实例 ， 
使 图 形 元 件 tt 的 实例 与 舞台 的 右边 缘 对 齐 ， 
如 图 7-9 所 示 。 

@@) 右 击 第 1 帧 ,在 快捷 菜单 中 选择 [创建 
补 间 动画 了 命令 ,制作 由 左 向 右 的 运动 渐变 的 
动画 。 

@O 按 Ctrl 十 Enter 键 测试 动画 ,并 将 该 
动画 文件 以 shul. swf 为 名 保存 在 swf 根 文 
件 夹 中 。 


[ea 时 间 轴 || 二 | 图 场景 1 
ED 


| 国 场 呈 1 


[时 间 禹 | 
上 怖 国 口 775 780 785 790 795 


A WE 一 
KY 


村 宣 | 呈 | 咯 | [3 


舞台 
图 7-9 动画 第 800 帧 处 图 形 元 件 的 位 置 示意 图 


(2) 按 题 意 打开 swf 文件 夹 中 的 文件 shu2. fla 并 完成 题 意 要 求 的 操作 。 

中 选择 [文件 了 打开 命令 .打开 swf 文件 夹 中 的 文件 shu2. fla。 单 击 【时间 轴 了 面 
板 左下 方 的 [插入 图 层 按 钮 鸳 , 双 击 新 增 的 层 名 ,将 层 名 改 为 “文字 变化 ”, 完 成 添加 一 个 

@ 右 击 新 插入 图 层 的 第 45 帧 ,在 快捷 菜单 中 选择 【插入 关键 帧 3 命令 ,在 第 45 帧 处 
添加 关键 帧 。 单 击 工 具 面 板 中 的 【文本 3 工具 .居中 输入 文字 ”书籍 ”并 在 【属性 了 面板 中 设 
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置 【 字 体 了 为 “方正 水 柱 体 ” 皂 字 体 大 小 3 为 70 像素 ,【 文 本 颜色 3 为 #993300。 

@ 右 击 第 55 帧 ,在 快捷 菜单 中 选择 【插入 关键 帧 3 命令 。 选 中 第 55 帧 中 的 文字 对 
象 , 两 次 选择 [修改 3I【 分 离 ] 命 令 或 连续 按 快捷 键 Ctrl 十 B, 将 其 分 离 。 

@ 单 击 第 70 帧 将 其 选中 , 按 F7 键 插入 空白 关键 帧 ,输入 文字 “力量 ”, 并 将 其 分 离 。 

@ 单 击 第 55 帧 ,在 【属性 了 面板 的 【 补 间 了 F 拉 列表 框 中 选择 【形状 了 选项 ,完成 文字 
“书籍 ”形状 渐变 为 文字 “力量 ”。 

注意 : 

。 在 创建 运动 渐变 动画 时 ,首尾 两 个 关键 帧 中 的 对 象 必 须 组 合 或 设 为 图 形 元 件 。 

。 在 创建 形状 渐变 动画 时 ,首尾 两 个 关键 帧 中 的 对 象 必 须 分 离 。 

。 要 改变 动画 中 对 象 的 透明 度 、 颜色 、 亮度 ,或 者 对 象 要 进行 旋转 和 翻转 ,该 对 象 必 

须 设 置 为 图 形 元 件 。 

@ 将 第 70 帧 复制 到 第 71 帧 ,选中 第 71 帧 中 的 文字 对 象 ,选择 [插入 】I【 转 换 为 元 
件 3 命 令 ,将 其 转换 为 图 形 元 件 , 并 在 【属性 了 面板 的 【颜色 下拉 列 表 框 中 选择 【透明 度 了 ,将 
【Alpha] 设 置 为 100%。 

@ 单 击 第 80 帧 插入 关键 帧 ,选中 图 形 元 件 * 力 量 ”, 在 【属性 了 面板 的 【颜色 下 拉 列 表 
框 中 选择 【透明 度 了 ,将 【透明 度 了 设置 为 0% 。 选 中 第 71 帧 ,在 【属性 了 面板 的 【 补 间 了 下 拉 
列表 框 中 选择 【运动 渐变 3 选项 ,完成 文字 ”力量 ”的 透明 度 的 渐变 。 

@ 选中 第 81 帧 , 按 F7 键 插入 空白 关键 帧 。 输 入 文字 “知识 = 力量 ”, 然 后 选中 第 100 
帧 , 按 F5 键 ,使 第 81 帧 输入 文字 ”知识 = 力量 ”延续 到 第 100 帧 。 帧 的 变化 情况 ,如 
图 7-10 所 示 。 


重 安 | 9 [3 [46 [12.0 fps | 3.8s 


图 7-10 “文字 变化 ” 层 中 帧 的 示意 图 


@ 按 快捷 键 Ctrl 十 Enter 测试 动画 .将 该 动画 文件 以 shu2. swf 为 名 保存 在 swf 文件 
夹 中 。 
(3) 按照 题目 要 求 ,完成 Flash 遮 单 动画 的 制作 ,操作 步骤 如 下 。 
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Oz 在 Flash 中 :选择 【修改 了 民 文 档 ] 命 令 ,打开 【文档 属性 了 对 话 框 ,设置 动画 的 【 尺 
才 了 为 170X170 像素 .【 帧 频 ] 为 10 帧 / 秒 。 

@ 选择 [文件 3IK 导 入 3 命令 ,在 第 1 层 的 第 1 帧 上 导入 
img 文件 夹 中 图 像 文件 F1.jpg。 打 开 【 对 齐 了 浮动 面板 ,选中 
对 象 , 依 次 单 击 【 对 齐 了 浮动 面板 中 的 【相对 于 舞台 水平 中 
齐 3 【垂直 中 齐 ] 按 钮 ,使 对 象 居 中 对 齐 , 如 图 7-11 所 示 。 

@ 选择 [修改 YIK 排 列 3I【 锁 定 3 命 令 .将 对 象 在 舞台 中 锁 
定 。 并 单 击 第 30 帧 , 按 F5 键 ,使 其 延续 到 第 30 帧 。 

@ 单 击 【 时 间 轴 面板 左下 方 的 【插入 图 层 3 按 钮 总, 插 
和 信 名 为 “图 像 ” 的 第 2 个 层 和 名 为 “ 遮 单 ”的 第 3 个 层 , 在 “图 
像 ” 层 的 第 1 帧 上 导入 img 文件 夹 中 图 像 文件 shu4. jpg, 将 其 转换 成 图 形 元 件 。 

@ 在 “ 遮 单 " 层 的 第 1 帧 上 ,居中 输入 文字 “ 书 ”, 字 体 为 “黑体 ”, 大 小 为 90 像素 ,颜色 
为 #000000, 并 使 “ 遮 音 ”" 层 延续 到 第 30 帧 。 

@ 选中 “图 像 ” 层 ,在 第 1 帧 处 使 “图 像 * 层 中 的 实例 和 “ 遮 单 * 层 中 的 文字 “ 书 ” 的 左边 
缘 对 齐 。 在 “图 像 ” 层 的 第 30 帧 处 ,插入 关键 帧 。 用 鼠标 拖 动 实例 ,使 “图 像 ” 层 中 的 图 像 
和 “ 遮 单 ”* 层 中 的 文字 “ 书 ” 的 右边 缘 对 齐 。 

@ 单 击 “图 像 ” 层 的 第 1 帧 ,在 【属性 了 面板 的 k 补 间 了 下 拉 列 表 框 中 选择 【运动 渐变 3 选 
项 ,使 其 成 为 运动 渐变 动画 。 

@ 选中 * 遮 音 ” 层 , 右 击 , 在 快捷 菜单 中 选择 【 遮 单 层 ] 命 令 .将 文字 层 设 为 遮 音 层 , 如 
图 7-12 所 示 。 


图 7-11 【对 齐 ] 浮 动 面板 


图 7-12 遮 单 动画 示意 图 


@ 按 快捷 键 Ctrl 十 Enter 测试 遮 音 效果 的 动画 ,将 该 动画 文件 以 shu3. swf 为 名 保存 
在 swf 文件 夹 中 。 

(4) 按照 题目 要 求 ,修改 Flash 动画 文件 shu4. fla, 操 作 步 又 如 下 。 

@ 选择 [文件 攻打 开 了 命令 ,打开 swf 文件 夹 中 的 Flash 文件 shu4. fla, 该 动画 文件 
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【场景 1 中 的 遮 章 效果 动画 的 帧 示意 图 ,如 图 7-13 所 示 。 


文件 里】 编辑 下 ) 视图 插入 I) 修改 旭 文本 [9 命令 CC) 控制 @) 窗口 QD 帮助 0D 
DS omNM -HOn| 


shuk. at 


[Lenam | 二 | 图 场 及 1 EN 图 
了 ODO! 5 io 上 is zo zs so 3 4 45 50 55 6 
四 | 

* 图 口 | 

国 |。 | 

e IE| 

去 | 
医 qd | 

[打量 加 由 加 [ 3 [6.0 tps | 20s 转 梧 名 

f 己 

国 

图 

时 ] 图 | 


图 7-13 遮 轩 动画 示意 图 


@ 选择 【窗口 ] 民 其 他 面板 ] 代 场景 命令 ,在 【场景 3 面板 中 单 击 【添加 场景 3 按钮 加 中 ， 
添加 一 个 新 的 名 为 “导入 逐 帧 动画 ”的 场景 .如 图 7-14 所 示 。 

@ 单 击 【时 间 轴 面板 右上 角 的 【编辑 场景 ] 按 钮 鲁 ,. 将 当前 场景 切换 到 新 添加 的 “ 导 
入 逐 帧 动画 ”的 场景 中 ,选择 [文件 3I【〖 导 入 3 命令 ,导入 在 第 1 大 题 中 新 修改 过 的 逐 帧 动画 
文件 shu. gif, 导 入 逐 帧 动画 文件 后 的 时 间 轴 和 舞台 如 图 7-14 所 示 。 


0 
6.0 9s [0.0s 国王 | 


7-14 ”添加 新 场景 及 导入 逐 帧 动画 的 示意 图 


@ 按 快捷 键 Ctrl 十 Enter 测试 诞 音 效果 的 动画 :将 该 动画 文件 以 shu4. swf 为 名 保存 
在 swf 文件 夹 中 。 
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网 页 设计 (45%) 

(1) 按照 图 7-1 所 示 的 样张 ,创建 符合 要 求 的 首页 文件 index. html, 操 作 步 骤 如 下 。 

QO@ 选择 [文件 3I【 新 建 ] 命 令 ,创建 新 的 网 页 。 选 择 【 修 改 YI【 页 面 属性 命令 ,给 网 页 
设置 [背景 图 像 ] 为 img 文件 夹 中 的 文件 bg0040. gif, 并 设置 其 他 必需 的 网 页 属性 。 

@ 选择 [插入 3 栏 的 [布局 选项 , 单 击 【布局 视图 3 按钮 .在 网 页 中 如 图 7-1 所 示 的 样 
张 绘制 布局 表格 ,在 页 面 顶 部 绘制 布局 单元 格 为 800 X 80 像素 ,在 其 中 插入 Flash 文件 
shul. swf。 选 中 Flash 文件 shul. swf, 在 【属性 了 面板 中 为 Flash 文件 命名 shul 。 

@ 在 网 页 左 侧 如 图 7-1 所 示 绘 制 4 个 大 小 为 79X79 像素 的 布局 单元 格 , 按 样张 绘制 
两 个 大 小 为 170X170 像素 的 布局 单元 格 。 在 网 页 左 侧 的 4 个 单元 格 中 分 别 搬入 鼠标 经 
过 图 像 , 其 原始 图 像 文 件 分 别 为 img 文件 夹 中 的 t2_2. gif t3_2. gif、t4_2. gif、t7_2. gif, 鼠 
标 经 过 图 像 文 件 分 别 为 img 文件 夹 中 的 t2_1. gif\t3_1. gif\t4_1. gif\t7_1. gif。 

由 单 击 【插入 3 栏 的 [常用 】 选 项 中 的 【图像 ] 按 钮 ,在 网 页 右 侧 一 个 布局 单元 格 中 插入 
img 文件 夹 中 的 逐 帧 图 像 文件 shu. gif。 

@ 在 网 页 右 侧 另 一 个 布局 单元 格 中 , 单 击 【 插 入 ] 栏 的 【布局 选项 中 的 【描绘 层 按 
钮 ,分 别 绘制 大 小 为 170X170 像素 的 4 个 层 Layerl、Layer2、Layer3、Layer4, 在 4 个 层 中 
分 别 插入 文件 {1. jpg、shu2. swf、shu3. swf、shu4. swf, 并 在 层 的 【属性 了 面板 中 设置 这 些 层 
有 相同 的 x、y 坐标 ,将 4 个 大 小 一 致 的 层 释 放 在 一 起 。 

(2) 用 photo 子 文件 夹 中 的 图 像 创 建 网 站 图 像 相 册 ,其 要 求 如 下 。 

J 网 站 相册 标题 为 “ 书 一 一 人 类 的 精神 粮食 ” ,省略 副标题 。 

G@ 页 面 图 像 的 缩 略图 尺寸 为 100X100 像素 ;每 行列 数 为 4 列 ; 缩 略图 像 文 件 格式 为 
PEG 

@ 初始 图 像 文件 夹 为 photo 子 文件 夹 , 目 标 图 像 文件 夹 为 本 地 站 点 的 根 文件 夹 。 

@ 其 他 参数 默认 ,网 页 用 img 文件 夹 中 的 文件 bg0029. jpg 设置 背景 图 像 。 

以 上 操作 步骤 参考 实验 1 第 3) 题 的 第 (3) 小 题 。 

名 在 页 面 合 适 的 位 置 插 入 【 层 】, 单 击 【 插 入 ] 栏 的 【常用 】 选 项 中 的 [图像] 按钮 ,插入 
图 像 文件 return. gif ,并 选中 该 图 像 ,在 【属性 了 面板 中 为 该 文件 建立 返回 首页 index. html 
的 超级 链接 。 

@ 选择 【文件 了 民 另 存 为 了 命令 .将 网 页 文件 以 indexl. html 为 名 保存 在 本 地 站 点 的 
根 文件 夹 中 。 

(3) 按 题 意 创建 网 页 文件 book. html, 并 将 此 文件 保存 本 地 站 点 的 根 文件 夹 中 。 

@ 选择 【修改 XYI【〖 页 面 属性 3 命令 ,在 网 页 中 设 园 背景 图 像 为 img/bg0002_1. jpg, 如 
图 7-15 所 示 ,并 设置 其 他 网 页 属性 后 保存 文件 。 

@ 双击 根 文件 夹 中 的 文件 bookl. doc, 打 开 该 文档 ,并 选中 全 部 文字 ,将 其 复制 并 粘 
贴 到 网 页 编辑 窗口 ,调整 好 文字 的 排列 方式 ,在 网 页 顶部 添加 标题 文字 “ 书 一 一 人 生 的 伴 
倡 ,知识 的 源泉 ”。 

@ 选择 【窗口 CSS 样式 3 命令 , 单 击 【CSS 样式 了 面板 底部 的 【新 建 CSS 规则 3 按钮 ， 
在 新 的 样式 表 文 件 format. css 中 创建 新 样式 . stylel. 在 【. stylel 的 CSS 规则 定义 (在 
format. css 中 7) 对话 框 的 【类 型 3 中 设置 【字体 3 为 “华文 行 档 ” 攻 大 小 3 为 24 像素 .【 文 字 颜 
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book html 
本 代码 | 全 拆 分 | 团 设计 |， 标题: 用 ] 喇 归 委 加 |C 目 双 | 
We TT 和 二 让 
[ET SN 
已 科 容 ， 守 积 沪 话 类 


“少年 读书 ， 如 际 寅 月 ; 中 年 读书 ， a 老年 读书 ， 
和 站 上 玩 月 。 篆 以 阅历 之 小 深 ， 为 所 得 之 小 深 


昌 “有 了 功 志 读书 ， 调 之 福 ; 有 力量 济 人 ， 谓 之 福 ; 有 学 问 著述 ， 
弹 之 福 ;无 是 非 到 耳 ， 亩 之 福 ; 有 多 阅 直 谅 之 友 谓 之 福 。” 


采 。 “ 城 书 不 难 ， 能 看 为 难 ;看 书 不 难 ， 能 认为 难 ， 读书 不 难 ， 
能 用 为 难 ， 能 用 不 难 ， 能 记 为 难 。 


状 凡事 不 宜 亨 ， 若 读书 则 不 可 不 记 ; 凡事 不 宜 仿 ， 若 读书 则 不 可 不 贫 ; 凡事 不 宜 瘤 ， 若 行 重 则 不 可 
不 病 。” 


引 回 "得 诀 书 者 ， 无 之 而 非 镍 ， 山 水 亦 书 也 ， 杖 夯 亦 李 也 ， 花 月 亦 书 也 。” 
| | 
摘自 清 戎 独 关 网 生 六 -基隆 躺 》 
3 | Bn 
局 2 


Bo, 


图 7-15 ”book. html 的 样张 


色 ]】 为 #FF0000。 用 同样 的 方法 创建 新 样式 . style2, 将 新 的 样式 表 文 件 保存 在 本 地 站 
点 下 。 

@ 如 图 7-15 所 示 在 网 页 上 添加 img 文件 夹 中 图 像 文件 shu3. jpg、return. gif。 

@ 选择 [窗口 IKCSS 样式 命令 , 单 击 【CSS 样式 3 面板 底部 的 【附加 样式 表 】 按 钮 
二 引 ,链接 本 地 站 点 中 的 外 部 层 秋 样式 表 文 件 ellipse. css, 并 将 ellipse 样式 作用 于 图 像 文 
件 shu3. jpg, 将 样式 . stylel 作用 于 网 页 标题 ,将 样式 . style2 作用 于 网 页 中 的 其 他 文字 。 

@ 将 光标 定位 在 网 页 中 文字 “清朝 张 潮 先 生 ” 中 间 ,选择 [插入 】I【 命 名 销 记 J 命令 ,在 
【命名 锚 记 了 对 话 框 中 输入 用 于 超级 链接 的 名 为 aa 的 锚 点 。 

CI) 选中 网 页 上 的 图 像 文 件 return. gif, 在 【属性 了 面板 中 为 该 文件 建立 返回 首页 
index. html 的 超级 链接 。 

@@ 浏览 网 页 后 ,将 网 页 保存 在 本 地 站 点 中 。 

(4) 按照 题 意 ,参考 试题 样张 创建 符合 要 求 的 网 页 首页 文件 index. html, 并 将 此 文件 
保存 在 本 地 站 点 的 根 文件 夹 中 。 

9 选中 网 页 左 侧 第 1 个 【鼠标 经 过 图 像 了 ,选择 【窗口 了 3 代行 为 了 命令 ,打开 【行为 了 面 
板 , 单 击 划 按 钮 添加 行为 。 选 择 【 控 制 Shockwave 或 Flash 了 动作 ,在 弹出 的 【控制 
Shockwave 或 Flash] 对 话 框 中 设置 “影片 shul” 的 【操作 了 为 【播放 了 单 选 按钮 , 单 击 【确定 】 
按钮 【控制 Shockwave 或 Flash】 的 动作 被 添加 到 [行为 7 面板 中 。 

选中 该 行为 ,并 单 击 事件 列表 框 中 下 三 角 按钮 [要 .在 菜单 中 选择 事件 [onClick】 ,其 
意义 为 单 击 该 鼠标 经 过 图 像 ,开始 播放 页 面 项 部 的 Flash 文件 shul. swf。 

@ 选中 网 页 左 侧 第 1 个 [鼠标 经 过 图 像 了 .在 【行为 了 面板 中 , 单 击 | 型 | 按钮 添加 行为 。 
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选择 【控制 Shockwave 或 Flash 动作 :在 弹出 的 【控制 Shockwave 或 Flash 对 话 框 中 设置 
“影片 shul” 的 [操作 为 【停止 3 单 选 按 钮 . 单 击 【 确 定 3 按 钮 【控制 Shockwave 或 Flash3 的 
动作 被 添加 到 【行为 了 面板 中 。 

选中 该 行为 ,并 单 击 事件 列表 框 中 下 三 角 按 钮 [要 .在 菜单 中 选择 事件 [onDblClick】， 
其 意义 为 双击 该 鼠标 经 过 图 像 ,开始 播放 页 面 顶 部 的 Flash 文件 shul. swf。 

图 选中 网 页 左 侧 第 2 个 鼠标 经 过 图 像 , 单 击 添加 行为 按钮 型 ,选择 【显示 -隐藏 层 3 动 
作 ,在 弹出 的 【显示 -隐藏 层 〗 对 话 框 中 选中 层 Layer2 .并 单 击 【显示 按钮 设置 显示 该 层 , 隐 
藏 其 他 层 。 单 击 【 确 定 ] 按 钮 【显示 -隐藏 层 了 的 动作 被 添加 到 【行为 了 面板 中 。 

选中 该 行为 ,并 单 击 事件 列表 中 下 三 角 按钮 | 要 |; 在 菜单 中 选择 事件 [onMouseOver】， 
其 意义 为 当 鼠 标 指向 网 页 左 侧 第 2 个 鼠标 经 过 图 像 时 显示 层 Layer2, 此 时 可 以 看 到 播放 
的 文件 shu2. swf。 用 同样 的 方法 为 该 鼠标 经 过 图 像 添加 行为 : 当 鼠 标 指针 从 该 图 像 上 移 
开 时 ,显示 层 Layerl ,隐藏 其 他 层 ,此 时 显示 层 中 的 图 像 文件 {1. jpg。 

@ 选中 网 页 左 侧 第 2 个 鼠标 经 过 图 像 : 单 击 添加 行为 按钮 型 | 选择 [打开 浏览 器 窗 

了 动作 ,如 图 7-16 所 示 。 


打开 浏览 器 窗口 


图 7-16 【打开 浏览 器 窗口 3 对 话 框 


在 【打开 浏览 器 窗口 3 对 话 框 中 设置 【要 显示 的 URL:] 为 网 站 相册 文件 indexl. html。 
单 击 【 确 定 了 按钮 ,该 动作 被 添加 到 【行为 了 面板 中 。 

选中 该 行为 ,并 单 击 事件 列表 框 中 下 三 角 按钮 [要 .在 菜单 中 选择 事件 [onClick】 ,其 
意义 为 单 击 该 鼠标 经 过 图 像 .浏览 网 站 相册 文件 indexl. html。 

@@ 用 同样 的 方法 为 网 页 左 侧 第 3 个 鼠标 经 过 图 像 添 加 行为 : 当 鼠 标 指针 指向 该 图 像 
时 显示 层 Layer3, 此 时 可 以 看 到 播放 的 文件 shu3. swf, 当 鼠标 从 该 图 像 上 移 开 时 ,显示 层 
Layerl 中 的 图 像 文件 {1. jpg。 选 中 网 页 左 侧 第 3 个 鼠标 经 过 图 像 , 单 击 添加 行为 按钮 
划 |. 选 择 [K 打 开 浏 览 器 窗口 3 动作 ,在 【打开 浏览 器 窗口 3 对 话 框 中 设置 【要 显示 的 URL:】 
为 book. html# aa。 

@ 按照 题 意 用 同样 的 方法 为 网 页 左 侧 第 4 个 鼠标 经 过 图 像 添 加 行为 ,操作 略 。 

2) 综合 实验 题 2 

操作 步骤 略 。 


4. 实验 后 的 思考 题 
(1) 在 用 Fireworks 编辑 图 像 时 ,矢量 图 模式 和 位 图 模式 怎样 切换 ? 
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(2) 在 用 Fireworks 编辑 图 像 时 ,如 何 改变 图 层 的 又 放 次 序 ? 如 何 显示 、 隐 藏 图 层 ? 

(3) 在 用 Fireworks 编辑 图 像 时 ,如 何 将 图 像 的 背景 设 为 透明 色 ? 如 何 改变 图 像 填 
充 效 果 中 的 渐变 色 ? 

(4) 在 用 Fireworks 编辑 图 像 时 ,如 何 将 几 个 设置 好 的 图 像 效 果 组 合 保 存 为 一 个 特 
殊 效 果 ? 如 何 对 其 他 对 象 使 用 这 个 效果 ? 

(5) 在 用 Flash 创建 动画 时 ,要 创建 运动 渐变 动画 、 形 状 渐变 动画 和 逐 帧 动画 应 该 注 
意 哪些 要 点 ? 

(6) 在 Flash 中 ,如 何 增加 、 删 除 、 复 制 . 删 除 场景 ?如 何 调整 场景 的 播放 次 序 ? 

(7) 在 Flash 中 ,如 何 增加 、 删 除 、 重 命名 层 ? 如 何 改 变 层 的 释放 次 序 ? 如 何 引 用 其 
他 Flash 文件 中 的 元 件 ? 

(8) 在 Dreamweaver 中 ,如 何 创建 和 应 用 Java Script 脚本 文件 ? 

(9) 在 Dreamweaver 中 ,如 何 添加 、 应 用 和 管理 插件 ? 
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en & 建立 虚拟 机 环境 的 实验 


1. 实验 的 目的 与 要 求 


(1) 掌握 VMware 的 安装 和 基本 设置 。 
(2) 掌握 如 何 利 用 VMware 建立 实验 用 的 虚拟 机 。 


2. 实验 的 操作 内 容 


本 教材 对 实验 环境 有 一 定 的 要 求 。 在 不 具备 网 络 实验 环境 的 学 校 里 或 读者 家 中 ,可 
利用 本 章 推 荐 的 软件 VMware 在 一 台 实 验 用 的 PC 微机 上 再 构建 一 台 “ 虚 拟 服务 器 ”, 这 
样 在 一 台 实 验 用 的 PC 微机 上 同时 可 设置 本 地 站 点 和 远程 服务 器 ,从 而 能 顺利 地 完成 本 
教材 的 所 有 实验 。 

VMware 是 VMware 公司 出 品 的 一 个 著名 的 虚拟 机 软件 , 它 可 以 帮助 人 们 在 原 有 的 
操作 系统 中 添加 其 他 任何 一 种 当前 流行 的 操作 系统 ,从 而 实现 在 一 台 计 算 机 上 同时 运行 
多 个 操作 系统 ,并 可 在 当前 运行 的 几 个 操作 系统 之 间 随 时 互相 切换 。 

VMware 的 特点 是 允许 用 户 从 原 有 的 计算 机 系统 中 分 割 出 一 部 分 硬盘 空间 和 内 存 容 
量 , 将 其 虚拟 成 一 台 台 “独立 ”的 计算 机 ,这 些 “ 独 立 ” 的 计算 机 拥有 各 自 独 立 的 CMOS 、 硬 
盘 、 软 驱 、 光 驱 、 网 卡 `. 显 卡 等 硬件 。 使 用 者 可 以 在 每 一 台 虚 拟 的 新 计算 机 中 安装 操作 系统 
和 各 种 应 用 软件 ,当然 也 可 以 像 对 待 新 机 器 那样 进行 分 区 、 格 式 化 等 操作 ,这 些 操 作对 原 
有 的 主机 都 不 会 产生 任何 不 良 影响 。 

本 章 以 VMware 版 本 5. X 为 基础 来 介绍 ,有 For Windows NT/2000/XP 和 For 
Linux 两 种 不 同 的 版 本 。 可 以 到 http: //www. vmware. com/download1/software 下 载 
Windows NT/2000/XP 版 本 。 

它 的 最 低 系 统 需 求 是 Pentium 了 [266MHz 以 上 、CPU、128MB 以 上 内 存 , 为 了 能 更 好 
地 运行 系统 建议 实验 环境 配置 为 Pentium 4 1. 6GHz、384MB 内 存 (512MB 更 佳 ) 、 带 有 一 
个 10Mbps 以 上 的 以 太 网 接口 。 支 持 的 平台 的 是 Windows 2003/NT/2000/XP/Vista/ 
Linux。 Windows NT 要 求 必须 安装 Service Pack 3 补丁 ,不 支持 Windows 9X/Me。 目 
前 主流 的 PC 通常 使 用 的 是 Windows XP, 可 以 很 好 的 运行 VMware。 

使 用 VMware, 可 以 轻松 地 完成 网 卡 配 置 、 硬 盘 分 区 、CMOS 设置 等 实验 ,也 可 以 用 
一 台 实 验 计 算 机 建立 包括 一 台 客户 机 (实验 计算 机 本 身 ) 和 一 台 服 务 器 (实验 计算 机 上 安 
装 的 虚拟 机 ) 的 实验 环境 供 一 个 学 生 完 成 客户 机 和 服务 器 的 实验 。 


1) 安装 VMware 软件 

(1) 从 www. vmware. com 注册 下 载 VMware 软件 的 试用 版 本 ,并 安装 。 

(2) 申请 VMware 试用 许可 证 。 

(3) 启动 使 用 VMware。 

2) 安装 虚拟 机 

(1) 创建 一 台 准 备 安 装 Windows 2000 Advanced Server ,硬盘 空间 为 4GB ,通信 方式 
为 桥接 网 络 的 虚拟 机 。 请 自行 选择 虚拟 机 保存 的 文件 夹 。 

(2) 创建 成 功 后 ,调整 虚拟 硬件 配置 为 256MB 内 存 .无 USB 控制 器 。 

(3) 为 虚拟 机 安装 操作 系统 。 

(4) 操作 系统 被 安装 完成 后 ,安装 VMware Tool 来 优化 虚拟 机 性 能 。 

3) 设置 虚拟 机 和 主机 的 通信 

(1) 假设 实验 室 的 网 段 是 10. 10. 1. 0/24。 将 主机 网 卡 的 IP 地 址 设 为 10. 10. 1.2, 掩 
码 为 255.255.0.0。 将 虚拟 机 网 卡 的 IP 地址 设 为 10. 10. 1. 254, 掩 码 为 255. 255. 0.0。 用 
ping 命令 测试 网 络 是 否 连通 。 

(2) 将 主机 的 一 个 硬盘 分 区 加 到 虚拟 机 里 , 试 访问 分 区 上 的 文件 。 

(3) 将 主机 的 一 个 文件 夹 作为 共享 文件 夹 加 到 虚拟 机 里 , 试 通过 这 个 共享 文件 夹 在 
主机 和 虚拟 机 之 间 交 换文 件 。 


3. 实验 的 参考 步骤 


1) 下 载 和 安装 VMware 软件 
(1) VMware Workstation 的 试用 版 本 在 此 地 址 下 可 以 下 载 到 : http://www. 


vmware. com/download/ws/。 


在 如 图 8-1 所 示 的 页 面 中 点 击 Evaluate, 可 以 申请 30 天 的 试用 许可 证 。 


Home > Downloads > Desktop Virtualization Products > VMware VVorkstation 


Download VMware VYorkstation 


VMware » 
Workstation 


To use the versions below, you will need a valid serial number. To obtain your serial 
number, please follow these steps: 
Evaluate or purchase VMware Workstation and you will receive your serial 
number(s) 
We recommend that you register your serial number(s). 
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(2) VMware 的 安装 过 程 非常 标准 ,与 一 般 软 件 安 装 没 有 什么 区 别 , 只 需要 按照 安装 
向 导 的 提示 即 可 很 容易 地 完成 全 部 安装 ,整个 安装 过 程 不 会 超过 5 分 钟 。 在 安装 过 程 中 
会 提示 是 否 需 要 启用 光驱 的 自动 运行 功能 (建议 禁用 )、 是 否 同 意 安装 虚拟 设备 ,确认 安装 
即 可 。 

(3) VMware 是 有 使 用 时 间 限 制 的 商业 软件 ,因此 在 安装 后 必须 登录 其 网 站 进行 注 
册 以 获得 30 天 的 试用 授权 ;完成 注册 后 ,很 快 就 会 在 邮箱 中 收 到 一 个 扩展 名 为 REG 的 注 
册 表 文件 , 待 VMware 安装 结束 后 重新 启动 时 ,将 该 REG 文件 导入 注册 表 即 可 (直接 双 
击 该 REG 文件 ) 。 

(4) 安装 好 VMware 软件 后 ,在 桌面 上 会 产生 一 个 VMware Workstation 的 图 标 


医 :双击 该 图 标 就 可 以 启动 VMware。 初 次 使 用 时 ,需要 输入 试用 许可 证 中 提供 的 安 


装 序列 号 。 

如 果 觉 得 VMware 不 错 ,需要 在 实验 室 环境 中 正式 使 用 ,请 购买 VMware 
Workstation 的 许可 证 。 

2) 安装 虚拟 机 

(1) VMware 主 菜单 中 ,选择 File | New | New Window 命令 , 即 可 进入 如 图 8-2 所 
示 的 初始 窗口 ,此 时 工具 栏 中 左边 的 Power Off 和 Power On 等 工具 按钮 都 呈 灰 色 ( 不 可 
用 状态 )。 由 于 没有 创建 新 的 虚拟 计算 机 ( 即 New Virtual Machine) ,当然 就 无 法 使 用 。 
因此 , 接 下 来 的 第 一 步 就 是 在 VMware 中 创建 一 台 “ 新 的 虚拟 计算 机 ”, 根 据 实验 的 需要 
下 面 介绍 创建 一 台 适 合 安 装 “Windows 2000 Advanced Server” 操 作 系 统 的 虚拟 服务 器 的 
方法 。 

在 下 面 的 介绍 中 为 了 能 让 读者 明白 ,将 原来 的 真实 计算 机 系统 称 Host 系统 ,新 的 虚 
拟 计算 机 系统 称 Guest 系统 。 

创建 虚拟 服务 器 的 操作 步骤 如 下 。 

(2) 创建 虚拟 机 。 

Q@ 单 击 图 8-2 中 的 New Virtual Machine 图 标 或 选择 File | New | New Virtual 
Machine 命令 ,也 可 以 按 快捷 键 Ctrl 十 N, 即 可 进入 创建 虚拟 机 的 向 导 并 安装 虚拟 机 。 

@ 在 选择 虚拟 机 创建 方式 时 ,一 般 都 可 以 选择 Typical 选项 ,系统 会 自行 调整 虚拟 机 
的 物理 内 存 大 小 和 硬盘 空间 ,即使 虚拟 机 创建 成 功 后 ,也 可 以 手工 青 分 配 物 理 内 存 和 磁盘 
空间 ,所 以 此 时 可 以 不 选择 Custom 选项 。 单 击 【 下 一 步 3 按 钮 。 

注意 : 

File 菜单 下 主要 有 New 和 Open 两 个 命令 ,选择 New | New Window 命令 ,可 以 新 
建 一 个 窗口 让 用 户 同时 运行 多 个 操作 系统 ;选择 Open 命令 ,可 以 打开 一 个 *.vmx 的 虚 
拟 机 配置 文件 。 

@) 选择 虚拟 机 中 安装 的 操作 系统 。 

在 图 8-3 所 示 的 窗口 中 可 以 选择 实验 中 要 安装 的 虚拟 服务 器 的 操作 系统 ,选择 
Windows 2000 Advanced Server, 然 后 单 击 【下 一 步 3 按 钮 。 

@ 指定 虚拟 机 文件 的 存放 路 径 。 
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| Be Edt Yew 网 Ieam Wndows Hep | 几时 加 六 多 || 画 回国 || 口 国 


VMware Workstation 


VMware Workstation allows multiple standard operating systems and their applications to 
run With high performance in secure and transportable virtual machines. Each virtual 
machine is equivalent to a PC with a unique network address and full complement of 
hardware choices， 


” 
Chick this button to create a new virtual machine, You then can install 
and run a variety of standard operating systems in the virtual machine. 
New Virtual 
Machine 


Click this button to create a new team. You then can add several virtual 
machines and connect them with private team LAN segments. 


Click this button to browse for virtual machines or teams and to select 
one to display in this panel, You then can interact with the guest 
I operating system within this display as you would a standard PC 


Open Existing 
YM or Team 


图 8-2 ”VMware Workstation 窗口 


New Virtual Machine Wizard x 


Select a Guest Operating System 


Which operating system will be installed on this 
virtual machine? 


Windows 2000 Server 
Windows 2000 Advanced Server 
windows XP Home E dition 


图 8-3 选择 虚拟 机 中 安装 的 操作 系统 


在 图 8-4 所 示 的 Virtual machine name 文本 框 中 可 以 给 当前 要 创建 的 虚拟 机 起 个 名 
字 , 在 Location 文本 框 中 给 当前 要 创建 的 虚拟 机 文件 指定 存放 的 路 径 , 也 可 以 单 击 
Brower 按钮 选 定 虚拟 机 文件 指定 存放 的 路 径 ,然后 单 击 【 下 一 步 ] 按 钮 。 

注意 : 

请 选择 一 个 剩余 空间 较 大 的 硬盘 分 区 ,最 好 是 非 系统 分 区 ,以 免 误 操作 而 发 生 不 可 预 
测 的 问题 。 虚 拟 机 的 硬盘 大 小 请 根据 实际 需要 选择 ,默认 的 大 小 可 以 满足 一 般 实验 的 要 
求 ,如 果 有 特殊 的 要 求 ,实验 网 站 有 较 大 容量 的 资源 文件 的 话 ,可 以 根据 需要 设置 。 这 个 
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What name would you like to use for this virtual 
machine? 


ID:\My Root\My Documents\My Virtual Machines\windows 2000 


图 8-4 指定 虚拟 机 的 名 字 和 路 径 
硬盘 大 小 在 设置 完 后 就 不 能 再 调整 大 小 ,所 以 请 在 实验 环境 设计 之 初 就 估计 清楚 容量 , 防 
止 发 生 庶 拟 机 的 硬盘 空间 不 够 用 的 情况 。 
@ 选择 网 络 连 接 方式 。 


在 图 8-5 所 示 的 窗口 中 提供 了 4 种 网 络 连接 的 方式 ,4 种 网 络 连接 的 方式 的 具体 意义 
如 下 。 


Network Type 
What type of network do you want to add? 


8-5 选择 虚拟 机 的 网 络 连接 方式 


。 Use bridged networking( 用 桥接 网 络 ) : 相当 于 在 当前 的 计算 机 上 安装 一 个 虚拟 
网 桥 ( 可 以 看 成 网 络 交换 机 ,所 有 Guest 虚拟 机 和 Host 主机 都 会 连 到 这 个 交换 机 
上 )。 如 果 在 计算 机 系统 中 已 经 安装 了 物理 网 卡 ,那么 建议 选择 这 一 选项 ,这 样 
Guest 系统 就 可 以 通过 虚拟 网 卡 直接 与 外 部 局 域 网 相连 ,而 且 Guest 系统 同样 有 
自己 的 IP 地 址 ,可 以 使 用 外 部 网 络 提供 的 所 有 服务 。 实 验 环境 应 该 选择 这 个 
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选项 。 
。 Use network address translation(NAT) (用 网 络 地 址 翻译 器 ): 如 果 和 希望 使 用 
Host 系统 的 网 络 设 置 连接 到 Internet 或 其 他 的 TCP/IP 网 络 , 但 又 不 想 给 Guest 
系统 配置 一 个 外 界 可 访问 的 公开 IP 地 址 ,那么 可 以 选择 这 个 选项 ,这 样 外 部 网 络 
就 无 法 访问 Guest 系统 了 ,但 是 Guest 机 还 可 以 上 网 。 这 就 好 比 把 虚拟 网 桥 改 成 
了 虚拟 的 宽带 路 由 器 。 
。 Use host-only networking( 仅 用 主机 网 络 ): 如 果 不 想 和 外 部 网 络 连 接 , 只 想 建立 
一 个 虚拟 专 有 网 络 ,那么 这 个 选项 是 最 佳 选 择 。 这 种 情况 下 ,虚拟 机 只 能 和 主机 
通信 。 
。 Do not use a network connection( 不 使 用 网 络 连接 ): 如 果 选 择 此 项 , 则 多 个 操作 
系统 可 以 同时 运行 并 自由 切换 ,但 Host 和 Guest 系统 之 间 却 无 法 互相 访问 。 
一 般 情况 选择 默认 的 Use bridged networking 单 选 按钮 , 单 击 【完成 了 按钮 完成 创建 
工作 。 新 创建 的 Windows 2000 Advanced Server 虚拟 服务 器 如 图 8-6 所 示 , 此 时 这 人 台 服 
务 器 还 只 是 一 台 未 安装 操作 系统 的 裸 机 ,就 像 刚 下 生产 线 的 新 PC 一 样 。 


Windows 2000 Advanced Server 

State: Powered off 

Guest O05: Windows 2000 Advanced Server 

Configuration file: D;\My Root\My Documents\My Virtual Machines\Windows ,,.\Windows 2000 Advanced Server,ymx 
Version: Current virtual machine for VMware Workstation 5.5,1 


Devices 


BD Start this virtual machine 国 Memory 384 MB 

乱 Edkt virtual machine settings 加 Hard Disk (SC5I 0:0) 

鸳 co-Rom (DE 1:0) Auto detect 
Bridged 
Present 


鲁 clone this virtual machine 


Auto detect 
1 


国 virtual Processors 


Type here to enter notes for this virtual machine 


图 8-6 新 创建 的 Windows 2000 Advanced Server 虚拟 服务 器 


(3) 虚拟 机 硬件 配置 调整 。 

在 图 8-6 的 右边 窗口 中 显示 了 虚拟 服务 器 的 硬件 设备 ,如 Memory (内 存 )、Hard 
Disk (人 硬盘) .CD-ROM( 虚 拟 光 驱 )、Ethernet( 网 卡 ) 等 。 创建 好 虚拟 机 后 可 先 设置 虚拟 
机 的 内 存 , 接 下 来 就 应 该 安装 操作 系统 .然后 在 虚拟 机 的 操作 系统 环境 下 对 硬件 完成 配置 
5 

OO 设置 虚拟 机 的 内 存 。 

单 击 图 8-6 所 示 的 窗口 左边 的 Edit virtual machine settings 选项 ,系统 显示 如 图 8-7 
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所 示 的 虚拟 机 控制 面板 对 话 框 。 


8-7 虚拟 机 的 控制 面板 


利用 VMware 给 出 Host 内 存 资源 的 信息 ,调整 虚拟 机 控制 面板 右边 的 Guest Size 
的 微调 按钮 便 可 以 设置 虚拟 机 Guest 内 存 的 大 小 。 

@ 安装 虚拟 机 的 操作 系统 。 

虚拟 机 与 平时 所 使 用 的 计算 机 在 某 种 意义 上 来 说 是 一 样 的 ,因此 在 虚拟 机 中 安装 操 
作 系 统 的 步骤 与 在 计算 机 中 的 操作 完全 一 样 。 

单 击 VMware 工具 栏 上 的 Power On 按钮 区 开机 ,经 过 一 番 “ 自 检 ” 之 后 ,虚拟 机 会 从 
光盘 中 引导 Windows 2000 操作 系统 , 接 下 来 的 安装 操作 就 在 普通 计算 机 上 安装 操作 系 
统 完全 一 样 ,这 里 不 再 著述 。 

注意 : 

。 在 安装 操作 系统 的 过 程 中 一 般 需要 硬盘 进行 分 区 ,VMware 所 建立 的 硬盘 是 虚拟 
硬盘 ,事实 上 它 只 不 过 是 在 主机 硬盘 上 建立 了 一 个 特殊 的 文件 夹 。 因 此 ,不 管 在 
VMware 中 如 何 对 硬盘 进行 分 区 甚至 低级 格式 化 都 不 会 影响 主机 的 硬盘 分 区 ,这 
也 是 VMware 软件 的 一 大 特色 。 

。 平时 在 主机 中 安装 完 操作 系统 后 ,接着 就 得 安装 各 种 硬件 的 驱动 程序 ,不 过 在 由 
VMware 创建 的 虚拟 机 中 大 大 简化 了 这 项 工作 ,VMware 为 了 保证 系统 的 兼容 性 
和 稳定 性 ,把 大 部 分 的 硬件 设备 都 虚拟 成 最 标准 、 兼 容 性 最 好 的 虚拟 设备 ,不 需要 
安装 驱动 程序 。 

@@ 安装 虚拟 机 的 显示 驱动 程序 。 

安装 好 操作 系统 后 ,此 时 系统 默认 的 显示 方式 是 16 色 、640X480 的 分 辩 率 。 这 种 显 
示 方 式 对 商务 网 站 来 说 显然 太 低 了 .不 过 VMware 还 自 带 了 一 套 虚拟 的 显卡 驱动 程序 对 
显示 性 能 进行 优化 ,安装 起 来 非常 方便 ,其 方法 如 下 : 
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虚拟 机 开机 的 状态 下 ,选择 VM | Install VMware Tools 命令 ,此 时 VMware 会 自动 
开始 安装 VMware Tools, 最 后 根据 软件 提示 重新 启动 系统 后 ,VMware Tools 会 随 系 统 
一 起 自动 启动 ,接着 它 会 对 计算 机 里 的 显卡 及 显示 器 进行 自动 检测 .并 自动 调整 系统 的 显 
示 属 性 使 之 达到 最 佳 状 态 。 用 户 还 可 以 根据 需要 右 击 桌面 空白 处 ,在 快捷 菜单 中 选择 【 属 
性 了 命令 ,后 面 的 显示 方式 设置 操作 与 Windows 操作 系统 中 显示 方式 设置 一 样 这 里 就 不 
再 获 述 。 

VMware Tools 不 但 优化 显示 ,还 提供 了 其 他 有 用 的 功能 ,请 读者 自行 在 虚拟 机 里 
人 研究。 

到 此 ,一 台 Windows 2000 Advanced Server 虚拟 服务 器 便 安 装 成 功 了 ,可 以 利用 这 
台 计 算 机 作为 服务 器 ,主机 作为 开发 和 测试 机 ,来 完成 本 教程 的 所 有 实验 。 

注意 : 

在 操作 虚拟 机 时 要 注意 ,和 饼 标 与 键盘 默认 的 服务 对 象 是 主机 Host, 要 想 让 它们 为 虚 
拟 机 工作 ,只 要 在 VMware 虚拟 机 窗口 的 虚拟 机 屏幕 范围 内 单 击 一 下 鼠标 ,它们 就 会 进 
入 VMware 的 虚拟 机 ,此 后 鼠标 和 键盘 就 属于 虚拟 机 了 。 若 要 切换 为 主机 Host 服务 只 
要 同时 按 Ctrl 十 Alt 键 , 此 时 和 鼠标 和 键盘 又 切换 回 主机 。 当 虚拟 机 在 全 屏 模 式 下 运行 , 需 
要 切换 回 主机 时 ,这 个 热 键 特别 有 用 。 当 虚拟 机 在 窗口 模式 下 运行 时 ,VMware 会 根据 鼠 
标的 位 置 自动 判断 控制 属于 虚拟 机 还 是 主机 。 

注意 : 

同样 的 方法 ,还 能 继续 添加 不 同 操作 系统 的 虚拟 机 ,只 要 主机 Host 有 足够 的 硬盘 空 
间 和 内 存 。 

3) 设置 虚拟 机 和 主机 的 通信 

前 面 已 经 介绍 了 怎样 创建 虚拟 机 ,虽然 虚拟 机 是 建立 在 主机 Host 上 的 ,但 是 它 是 一 
个 相对 独立 的 系统 ,可 以 把 它 看 成 一 台 “ 独 立 ” 的 计算 机 ,那么 虚拟 机 和 主机 如 何 进 行 数据 
交换 呢 ? 一 般 虚 拟 机 和 主机 数据 交换 有 以 下 几 种 的 方式 。 

(1) 利用 网 卡 进行 通信 

虚拟 机 可 以 拥有 一 块 以 上 的 虚拟 网 卡 , 因 此 ,虚拟 机 与 主机 之 间 可 以 利用 网 卡 进行 通 
信 , 因 为 在 桥接 网 络 方式 下 ,两 台 机 器 是 通过 虚拟 网 桥 连 在 一 起 的 ,所 以 也 就 省 去 了 安装 
网 卡 及 连接 网 线 这 样 的 工作 。 现 在 .读者 只 要 分 别 设置 主机 及 虚拟 机 的 网 卡 属性 ,让 它们 
组 成 一 个 对 等 网 或 者 标准 的 TCP/IP 网 络 ,它们 就 能 自由 通信 了 。 

假设 实验 室 的 网 段 是 10. 10.1.0/24。 将 主机 网 卡 的 IP 地 址 设 为 10. 10. 1.2, 掩 码 为 
255. 255. 255.0。 将 虚拟 机 网 卡 的 IP 地 址 设 为 10. 10. 1. 254, 掩 码 为 255. 255. 255. 0。 

设置 完成 后 ,在 虚拟 机 上 打开 Windows 附件 菜单 里 的 命令 提示 符 , 输 入 命令 ping 
10. 10.1.2, 可 以 看 到 如 图 8-8 所 示 的 通信 成 功 的 提示 。 

(2) 把 主机 的 硬盘 添加 到 虚拟 机 中 

如 果 用 户 想 把 主机 中 的 某 个 大 文件 复制 到 虚拟 机 中 ,将 主机 中 的 硬盘 添加 到 虚拟 机 
中 是 个 比较 好 的 方法 ,其 操作 步骤 如 下 。 

@ 退出 虚拟 机 的 操作 系统 , 关 掉 虚拟 机 ,屏幕 显示 图 8-6 所 示 的 窗口 。 

@ 单 击 图 8-6 所 示 的 窗口 左边 的 Edit virtual machine settings 选项 ,系统 显示 图 8-7 
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18.18.1 


图 8-8 ping 通信 成 功 的 提示 


所 示 的 虚拟 机 控制 面板 窗口 。 
@ 单 击 Add 按钮 ,进入 Add Hardware Wizard (添加 硬件 向 导 ),. 在 图 8-9 所 示 的 

Add Hardware Wizard 对 话 框 中 选择 硬件 类 型 为 Hard Disk , 单 击 【下 一 步 ] 按 钮 。 
本 


Hardware Type 
What type of hardware do you want to install? 


Hardware types: 


Explanation 
Add a hard disk- 


区 DvD/CD-ROM Drive 
态 Floppy Diive 

帮 Ethemet Adapter 
内 Sound Adapter 
USB conuoler 

@ SerialPor 
Paralel Part 

© Generic scslDevice | 


< 上 — 步 @) 取消 


图 8-9 添加 硬件 向 导 对 话 框 


@ 选择 硬盘 模式 为 Use A Physical Disk 单 选 按钮 ,然后 单 击 【 下 一 步 ] 按 钮 。 

@ 选择 Use individual partition 选项 ,然后 单 击 【下 一 步 ] 按 钮 。 

@ 此 时 程序 会 自动 检测 到 主机 上 的 硬盘 .在 图 8-10 所 示 的 窗口 中 会 发 现 主机 中 的 
人 硬盘 分 区 已 经 全 部 列 出 ,根据 需要 选取 分 区 ,然后 单 击 【下 一 步 3 按 钮 。 

@ 然后 单 击 【 完 成 3 按钮 ,将 主机 的 硬盘 添加 到 虚拟 机 中 。 

(3) 把 主机 的 文件 夹 设 为 虚拟 机 的 共享 文件 夹 

如 果 用 户 想 要 使 用 主机 中 的 某 个 文件 夹 中 的 文件 ,可 将 主机 中 该 文件 夹 设 置 为 虚拟 
机 能 够 共享 的 文件 夹 ,其 操作 步骤 如 下 。 
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isk Partitions 
would you like to use for this 


HPFS/NTFS 


图 8-10 选择 主机 Host 的 硬盘 分 区 


退出 虚拟 机 的 操作 系统 , 关 掉 虚拟 机 ,屏幕 显示 图 8-6 所 示 的 窗口 。 

@ 单 击 图 8-6 所 示 的 窗口 左边 的 Edit virtual machine settings 选项 ,系统 显示 图 8-7 
所 示 的 虚拟 机 控制 面板 窗口 。 

@@ 选择 Options 选项 卡 , 单 击 Shared Folders 选项 ,如 图 8-11 所 示 。 


8-11 虚拟 机 控制 面板 示意 图 


@ 单 击 Add 按钮 ,进入 Add Shared Folder Wizard (添加 共享 文件 夹 向 导 ), 在 
图 8-12 所 示 的 Add Shared Folder Wizard 对 话 框 中 .假设 给 共享 文件 夹 命 名 为 : sss, 主 
机 被 虚拟 机 共享 的 文件 夹 为 D: 盘 中 的 My site 文件 夹 . 单 击 【 下 一 步 和 按钮 。 

@@ 设置 这 个 共享 文件 夹 为 Enable this share 复 选 框 ,然后 单 击 【 下 一 步 3 按 钮 ,如 图 
8-13 所 示 。 其 他 两 个 复 选 框 的 意义 如 下 。 
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Name the Shared Folder 
What would you like to call this shared folder? 


图 8-12 设置 共享 文件 夹 向 导 


。 Read-only 复 选 框 被 选择 后 ,这 个 共享 文件 夹 为 只 读 状态 。 
。 Disable after this session 复 选 框 被 选择 后 ,这 个 共享 文件 夹 被 设置 为 本 次 虚拟 机 
关机 或 挂 起 ,下 次 开机 共享 文件 夹 不 可 访问 。 


Specify Shared Folder Attributes 
What is the scope and lifetime of this shared folder? 


8-13 ”添加 共享 文件 夹 的 属性 


@ 单 击 【 完 成 ] 按 钮 ,结束 共享 文件 夹 设置 ,此 时 虚拟 机 通过 【我 的 电脑 3 可 以 发 现 系 
统 中 增加 了 一 个 名 为 : SHARED FOLDERS(Z:) 本 地 磁盘 。 实 际 上 就 是 主机 被 虚拟 机 共 
享 的 文件 夹 ,如 图 8-14 所 示 。 

4) 实验 环境 配置 实例 

利用 VMware 这 个 软件 可 在 虚拟 机 上 安装 多 个 操作 系统 、 练 习 硬 盘 分 区 、 格 式 化 、 试 
用 新 软件 等 实验 ,这 是 一 个 不 可 多 得 的 计算 机 实验 室 好 软件 .有 关 虚 拟 机 的 其 他 设备 设置 
以 及 具体 的 各 项 应 用 ,这 里 不 再 一 一 歼 述 。 

接 下 来 给 出 一 个 完整 的 网 络 实验 环境 的 配置 实例 供 参 考 。 
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全 ndows 2000 Server 一 [Ctrl-AIt-F1] 一 了 Eware Workstation 


3 Eile Edit Power Snapshot Yiew Windows Help 


i 国 四 [| 四 | 日 spot 园 avee | 畴 图 


」 文件 器 ”编辑 (E) ”查看 (W 收藏 (4) ”工具 (D 才 助 (HD) 
+ FE - 之 - 加 | 罗拉 要 串 文 件 夹 僧 历 史 | 入 中 XX 吧 | 国 - 
地 址 () 阳 我 的 电脑 


让 
二 3.5 软 鱼 (A:) 
ee 国术 地 磁盘 (C) 
我 的 电脑 念 光 熏 D) 
加 本 地 瑞 盘 人 E) 
选 定 项 目 可 以 查看 其 说 明 。 司 本 地 型 盘 )  。 
SHARED FOLDERS (2:) 
星 示 交 计算 机 上 的 文件 和 文件 夹 。 国 控制 世 
另 请 参 园 ; 
我 的 文档 


加 上 分 大 


EE ee 到 | 画 男 夺权 20 


[TeTET 


图 8-14 共享 文件 夹 设置 完成 后 的 示意 图 


(1) VLAN 划分 
整个 实验 室 网 络 在 一 个 VLAN ,便于 管理 。 
(2) IP 地 址 划分 
实验 室 使 用 一 个 B 类 网 段 172. 16. 0.0/16, 总 共 65534 个 主机 地 址 可 用 ,应 该 可 以 满 
足 一 般 实 验 室 的 学 生 数 量 要 求 。 参 考 的 地 址 使 用 规则 如 下 。 
。 学 生 的 实验 机 器 的 IP 地 址 范围 : 网 段 第 三 位 数字 从 1 开始 到 99 为 止 , 也 就 是 说 
从 172. 16. 1. X 开始 用 到 172. 16. 99. X。 
。 虚拟 机 的 IP 地 址 范围 : 网 段 第 三 位 数字 从 100 开始 到 199 为 止 ,也 就 是 说 从 
172. 16. 100. X 开始 用 到 172. 16. 199. X。 
。 剩余 的 地 址 段 保 留 , 由 教师 灵活 安排 。 
。 学 生 的 实验 机 器 的 IP 地 址 和 虚拟 机 的 IP 地 址 的 对 应 规则 为 : 实验 机 器 的 网 段 第 
三 位 数字 十 100 王 虚拟 机 的 网 段 第 三 位 数字 ;第 四 位 数字 应 该 相同 。 例 如 : 某 学 
生 分 配 到 实验 机 器 的 IP 地 址 为 172. 16. 3. 88 ,那么 他 的 虚拟 机 的 IP 地 址 应 该 配 
置 为 172. 16. 103. 88 。 
。 具体 的 第 四 位 数字 的 划分 ,可 以 根据 学 生 的 学 号 或 者 实验 室 座位 号 等 选择 ,请教 
师 自 行 安排 。 
(3) 实验 机 设置 
操作 系统 : 推荐 安装 Windows 2000 Professional 或 者 Windows XP Professional ,不 
能 选用 Windows 9X, 和 否则 无 法 安装 VMware。 
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内 存 : 384MB 最 小 ,推荐 512MB。 

硬盘 : 10GB 以 上 。 

网 络 : 10Mbps 以 太 网 接口 一 个 。 

(4) 虚拟 机 设置 

操作 系统 : 推荐 安装 Windows 2000 Server 版 的 中 文 版 本 。 

虚拟 内 存 : 推荐 分 配 256MB。 

虚拟 硬盘 : 推荐 分 配 4GB 以 上 , 留 有 充足 的 余 量 。 

虚拟 网 络 : 配置 至 少 一 个 虚拟 网 卡 ( 默 认 配置 ) 。 

要 点 提示 : 

B 类 网 段 中 所 有 机 器 的 掩 码 设 为 255. 255. 0.0。 

网 关 可 统一 用 172. 16. 0. 254( 根 据 实际 网 络 环境 设置 而 定 ), 也 可 以 不 设 。 

DNS 服务 器 视 实验 室 具 体 配 置 情 况 设 置 ,由 学 生 向 指导 老师 申请 域名 和 其 虚拟 机 IP 
地 址 的 映射 ,当然 也 可 以 不 设 。 

4. 实验 后 的 思考 题 

(1) VMware 虚拟 机 设置 中 的 共享 文件 夹 ,只 是 为 了 用 户 方便 使 用 而 提供 的 特殊 功 
能 。 如 果 是 两 台 真实 的 PC, 那 么 应 该 怎样 通过 网 络 交换 文件 呢 ? 在 Host 和 Guest 之 间 
试 试 通常 的 网 络 共享 方式 。 

(2) VMware 支持 挂 起 (Suspend) 一 台 虚 拟 机 ,而 不 是 关 掉 它 , 用 户 可 以 解除 挂 起 
(Resume), 从 挂 起 之 前 的 状态 开始 继续 使 用 这 台 虚 拟 机 ,非常 方便 。 请 尝试 这 一 功能 。 
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1. 实验 的 目的 与 要 求 

(1) 掌握 实验 数据 库 的 安装 和 基本 设置 。 

(2) 掌握 数据 库 连 接 的 建立 。 

2. 实验 的 操作 内 容 

1) 设置 Access, 配 置 ODBC DSN 

(1) 在 服务 器 中 新 建 Access 数据 库 , 名 为 Score. mdb, 放 在 C:\Access DB 文件 夹 中 


(也 可 以 在 客户 机 中 建立 ,然后 通过 网 络 复制 到 服务 器 的 这 个 文件 夹 中 ) ,在 Score 数据 库 
中 建立 表 Student, 表 的 结构 如 表 9-1 所 示 。 尝 试 添 加 、 修 改 和 删除 数据 。 


表 9-1 Student 表 的 结构 


字 段 名 属 性 字 段 名 属 性 
字段 类 型 :文本 字段 类 型 :文本 
name 字段 大 小 :50 grade 字段 大 小 :50 
说 明 : 姓 名 说 明 :年 级 
字段 类 型 :文本 字段 类 型 :文本 
studentno( 主 键 ) 字段 大 小 :50 class 字段 大 小 :50 
说 明 :学 号 说 明 :班级 


(2) 确保 Score. mdb 已 经 在 服务 器 的 C:\Access DB 文件 夹 中 ,在 服务 器 上 配置 
ODBC DSN , 取 名 为 Score。 

2) 安装 和 设置 SQL Server 2000 ,配置 ODBC DSN 

在 本 实验 中 建立 的 数据 库 和 表 将 用 于 后 续 实 验 。 

(1) 在 服务 器 上 安装 SQL Server 2000 。 

(2) 新 建 一 个 名 为 selectcourse 的 数据 库 :数据库 属 性 让 SQL Server 自动 选择 。 

(3) 在 selectcourse 数据 库 中 .新 建 名 为 Account、Admin、Course、Selection、 
Student、Teacher 的 表 , 各 表 的 结构 如 图 9-1 所 示 。 

(4) 在 新 建 的 表 中 ,分 别 输 入 如 图 9-2、 图 9-3 和 表 9-2 所 示 的 新 记录 。 


Account: 


Admin: 
列 名 | 数据 类 型 ”| 长 度 | 允许 空 | 
PE|Adninno char 10 
sne char 20 
Course: 
| 凑 扬 类 型 “| 长 度 | 允许 宝 
char 10 
Hame char 50 
Descriptior char 256 vv 
Credit tinyint 1 
有 aximamzrum smallint 2 
Teacherno char 10 
Selection: 
关 扬 类 型 ”长度 | 光 许 空 
char 10 
char 10 
Student: 
数据 类 型 “| 长 度 | 区 许 空 
char 10 
char 20 
Departmnent Shar 20 
Major char 20 
Teacher: 
型 名 溉 据 关 和 型“ 长度 光 许 空 
bo char 10 
Hame char 20 
Title char 20 


图 9-1 selectcourse 数据 库 中 各 表 的 结构 


人 Account; 


student 9124018 


Anin AD1 
newton 123 teacher Tol 
aristot1e 123 teacher T02 
gothe 123 teacher T03 
turing 123 teacher TO4 


Admin : 
[Adnimno 
FI 
Course: 
图 9-2 新 记录 的 信息 (1) 
Student: 
Siudent [Nne Department [Wajor 
国 计 Wi Zhang Tu 计算 机 科学 系 “软件 
Teacher: 


sy Titl 
pi 


TO2 Mristotle 孝 授 
To3 Gothe 殊 损 
TO4 Turing 部 授 


图 9-3 新 记录 的 信息 (2) 
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表 9-2 Course 表 的 记录 信息 


Courseno Name Description Credit | Maximumnum | Teacherno 
德国 文学 史 一 一 
Cool 德国 语言 文学 5 200 Tol 
从 起 源 到 当代 I 
哲学 类 课程 本 科 高 年 级 与 硕 
D T 学 T 
C002 古 希 腊 哲 学 博士 生 选 听 4 5 02 
CO003 力学 经 典 物理 学 4 20 Tol 
Coo4 范畴 篇 亚 里 士 多 德 的 著作 3 5 To2 
给 我 一 个 支点 ， 个 
C005 “| 空间 物理 学 od 3 30 Tol 
地 球 
C006 物理 学 概论 本 科 一 年 级 基础 课程 ,必修 课 3 100 Tol 
C007 纯粹 理性 批判 没 搞 错 吧 ,证 我 讲 后 辈 的 课 4 10 To2 
Coo8 德国 古典 文学 当然 是 讲 我 的 《 浮 士 德 》 了 4 50 To3 
C009 颜色 学 很 少 人 知道 这 是 什么 课 4 1 TO3 
Co10 有 限 状 态 自动 机 猜 猜 看 ,这 是 哪个 专业 的 课 3 30 To4 


(5) 配置 selectcourse 数据 库 的 ODBC DSN, 取 名 为 CourseSys。 

(6)( 选 做 ) 在 服务 器 上 建立 一 个 新 的 Access 数据 库 名 为 selectcourse, 按 题 (3) 一 (5) 
的 要 求 建 立 各 个 表 , 并 输入 给 定数 据 和 配置 ODBC DSN( 需 要 取 另 外 的 DSN 名 字 , 例 如 
CourseSys6 ) 。 

注意 : 

后 续 的 实验 将 使 用 SQL Server 下 的 selectcourse 数据 库 来 做 , 题 (6) 给 读者 一 个 另 
外 的 选择 ,有 兴趣 的 读者 也 可 以 用 题 (6) 中 建立 的 Access 下 的 selectcourse 数据 库 来 做 后 
续 实 验 。 

3) SELECT 语句 的 实验 

任何 一 个 安装 好 的 SQL Server 2000 中 都 包含 了 pubs 实例 数据 库 , 接 下 来 将 用 这 个 
实例 数据 库 来 熟悉 SQL 语言 中 的 几 个 重要 语句 。 在 开始 试验 之 前 , 先 来 看 一 下 在 实验 中 
将 要 用 到 的 几 个 表 和 表 之 间 的 关系 ,如 图 9-4 所 示 。 

表 9-3 至 表 9-6 列 出 了 每 个 表 的 关键 字段 的 含义 , 表 中 并 没有 列 出 所 有 的 字段 . 仅 列 
出 了 可 能 在 实验 中 用 到 的 那些 字段 。 


表 9-3 。 authors 表 关 键 字 的 含义 


关 键 字 含 芭 

au_id 作者 号 (主键 ,用 于 唯一 的 区 别 两 个 不 同 的 作者 ) 
au_lname 作者 的 姓 

au_fname 作者 的 名 


实验 9 数据 库 应 用 的 实验 97 


图 9-4 pubs 实例 数据 库 各 表 之 间 的 关系 


续 表 

关 键 字 含 本 

phone 作者 的 联系 电话 

address 联系 地 址 

city 居住 城市 

zip 邮政 编码 

表 9-4 ”titles 表 关 键 字 的 含义 

关 键 字 含 义 

title_id 书目 号 (主键 ,用 于 唯一 区 别 两 个 不 同 的 书目 》 
title 书 名 

type 书目 类 别 

pub_id 出 版 商号 

Price 书 的 单价 

notes 书 的 说 明 

pubdate 出 版 日 期 

表 9-5 titleauthor 表 关 键 字 的 含义 

关 键 字 含 多 

title_id 书目 号 

pe 作者 号 (与 书目 号 共同 作为 主键 ,每 一 对 作者 号 与 书目 号 表示 一 个 

| 作者 与 书 的 对 应 关系 》 
au_ord 作者 顺序 号 (表明 是 该 书 的 第 几 作者 ) 
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表 9-6 ”publishers 表 关 键 字 的 含义 


关 键 字 含 党 
pub_id 出 版 商号 (主键 ,用 于 唯一 区 别 两 个 不 同 的 出 版 商 ) 
pub_name 出 版 商 名 字 
city 所 在 城市 
state 所 在 州 
country 所 在 国家 


其 中 ,authors( 作 者 ) 表 和 titles( 书 目 ) 表 通过 titleauthor( 作 者 与 书目 ) 表 关联 起 来 ， 
因此 titleauthor 表 的 每 一 条 记录 表示 了 一 个 作者 和 书目 的 对 应 关系 ,以 及 这 种 对 应 关系 
的 属性 。publishers( 出 版 商 ) 表 存放 了 出 版 商 的 信息 ,而 titles 表 中 用 到 了 出 版 商 信息 
(通过 pub_id 字段 ,这 种 字段 又 称 作 外 键 , 它 是 其 他 表 的 主键 ) 。 

SELECT 语句 用 于 查询 并 返回 满足 条 件 的 表 的 记录 集 。 下 面 将 练习 SELECT 语句 。 

(1) 查询 书目 ,返回 所 有 书目 和 书目 的 所 有 信息 。 

(2) 查询 书目 ,返回 所 有 书目 ,但 对 每 一 书目 , 仅 需 要 返回 书 名 、 类 型 和 价格 信息 。 

(3) 查询 书目 , 仅 返 回 类 型 为 *psychology” 的 书目 ,对 每 一 书目 , 仅 需要 返回 书 名 、 类 
型 和 价格 信息 。 

(4) 查询 书目 ,返回 内 容 与 题 (2) 相 同 , 但 要 对 返回 的 记录 排序 ,首先 按照 书 的 类 型 排 
序 , 如 果 类 型 相同 , 则 按照 价格 由 高 到 低 排 序 。 

(5) 查询 书目 ,返回 所 有 书目 ,对 每 一 书目 ,需要 返回 书 名 、 类 型 .单价 和 出 版 商 名 称 。 

(6) 查询 书目 ,返回 所 有 书目 的 书 名 、 类 型 和 作者 ,并 将 返回 结果 按照 作者 顺序 排序 ， 
从 第 一 作者 开始 ,当然 首先 同一 本 书 的 记录 要 排 在 一 起 。 

4) UPDATE 语句 的 实验 

UPDATE 语句 用 于 更 新 数据 库 表 的 记录 值 。 

将 书目 中 类 型 为 “business” 的 书 , 都 降价 1 元 。 

5) INSERT 语句 的 实验 

添加 一 个 新 的 作者 , 它 的 相关 信息 如 表 9-7 所 示 。 


表 9-7 新 作者 的 相关 信息 


字段 值 字段 值 
au_id 007-00-0007 city Everywhere 
au_lname Bond state NO 

au_ fname James zip 00007 
phone 007007 contract 和 

address Unknown 


6) DELETE 语句 的 实验 
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删除 所 有 姓 “Bond” 名 “James” 的 作者 。 
3. 实验 的 参考 步骤 


1) 设置 Access, 配 置 ODBC DSN 和 数据 库 连 接 

(1) 在 服务 器 上 新 建 名 为 Score. mdb 的 Access 数据 库 , 放 在 C:\Access DB 文件 夹 
中 (也 可 以 在 客户 机 上 建立 ,然后 通过 网 络 复制 到 服务 器 的 这 个 文件 夹 中 ) ,在 Score 数据 
库 中 建立 表 Student, 表 的 结构 如 表 9-8 所 示 。 尝 试 添加 、 修 改 和 删除 数据 。 


表 9-8 Student 表 的 结构 


字 段 名 属 性 字 段 名 属 性 
字段 类 型 :文本 字段 类 型 :文本 
name 字段 大 小 :50 grade 字段 大 小 :50 
说 明 : 姓 名 说 明 :年 级 
字段 类 型 :文本 字段 类 型 :文本 
studentno( 主 键 ) 字段 大 小 :50 class 字段 大 小 :50 
说 明 :学 号 说 明 :班级 


完成 本 题 的 操作 步骤 如 下 。 

@ 在 服务 器 上 启动 Access, 选 择 主 菜单 【文件 了 代 新 建 ] 命 令 ,在 弹出 的 任务 窗口 中 选 
择 [【 空 数据 库 】 ,系统 弹出 【新 建 数据 库 3 对 话 框 ,选择 路 径 到 C:\Access DB 中 ,输入 文件 
名 为 Score. mdb 后 , 单 击 【 创 建 3 按 钮 ,新 的 数据 库 就 将 保存 在 这 个 文件 中 。 

@ 第 一 步 创建 了 一 个 空 数据 库 , 里 面 一 个 表 都 没有 ,在 Score 数据 库 的 控制 面板 中 ， 
选择 【使 用 设计 器 创建 表 】, 单 击 【 设 计 J 按 钮 。 

@ 在 弹出 的 表 设 计 窗 口中 ,如 图 9-5 所 示 输 入 各 字段 名 称 、 数 据 类 型 和 说 明 , 并 右 击 
studentno 字段 ,将 它 设 为 主键 ;完成 后 关闭 该 窗口 ,系统 会 问 是 否 要 保存 ,选择 【是 了 ,输入 
表 名 为 Student 后 保存 。 


输入 法 模式 开局 
IME 语 名 模式 ( 忆 日 文 ) 无 转化 


图 9-5 Student: 表 的 示意 图 
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在 Score 数据 库 的 控制 面板 中 双击 表 名 Student, 可 以 进入 数据 浏览 和 输入 窗口 ， 
直接 添加 数据 。 请 尝试 添加 、 修 改 和 删除 记录 (如 果 不 知道 怎么 做 ,图 9-6 会 起 到 提醒 的 
作用 ) 。 


studentno 
9124068， 


图 9-6 Student: 表 的 示意 图 


(2) 确保 Score. mdb 已 经 在 服务 器 的 C:\ Access DB 文件 夹 中 ,在 服务 器 上 配置 
ODBC DSN, 取 名 为 Score。 

完成 本 题 的 操作 步骤 如 下 。 

Oz 在 服务 器 中 的 [开始 ] 麻 单 中 选择 【设置 3I【 控 制 面板 3 命令 ,双击 打开 【管理 工具 】, 
双击 【数据 源 (ODBC)】。 

@ 选择 【系统 DSN] 属 性 选项 卡 , 单 击 【 添 加 ] 按 钮 。 

@ 单 击 【添加 按钮 后 ,弹出 【创建 新 数据 源 〗 对 话 框 ,选择 数据 源 的 驱动 程序 为 
Microsoft Access Driver (* .mdb) , 单 击 【完成 按钮 。 

@ 这 时 弹出 一 个 KODBC Microsoft Access 安装 的 对 话 框 ,在 对 话 框 的 数据 源 名 文 
本 框 中 输入 DSN 名 称 为 Score。 然 后 单 击 【 选 择 ] 按 钮 ,如 图 9-7 所 示 。 


本 可 
数据 源 名 0): core 一 | 
说 明 @): Eee 
小 据 库 一 到 | 
数据 库 : 帮助 00 | 
创建 加 | 修复 中. | 压 连 如 .| i 
一 系统 数据 库 
人 无 到 ) 
个 数据 库 加 : 
| 过 机 | 


图 9-7 【ODBC Microsoft Access 安装 的 对 话 框 


@ 在 弹出 的 对 话 框 中 选择 正确 的 文件 夹 和 数据 库 文件 (C:\Access DB\ Score. 
mdb)。 

@ 单 击 【确定 3 按钮 ,再 单 击 【确定 3 按钮 .如 图 9-8 所 示 . 这 时 在 【系统 数据 源 ] 列 表 框 
中 出 现 了 Score: 此 时 配置 完成 。 

2) 安装 和 设置 SQL Server 2000 ,配置 ODBC DSN 和 数据 库 连 接 
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可 本 
用 户 DSW 系统 DSN | 文件 DSH | 豫 动 程序 | 跟踪 ”| 连接 池 | 关于 | 


CompanyInfo 
ExampleApps 
LocalServer 


图 9-8 【ODBC 数据 源 管理 器 3 的 对 话 框 


(1) 在 服务 器 上 安装 SQL Server 2000 ,完成 本 题 的 操作 步骤 如 下 。 

插入 安装 CD, 安 装 程序 会 自动 运行 ,选择 【安装 SQL Server 2000 组 件 3I【 安 装 数据 
库 服 务 器 选项。 

@ 看 到 欢迎 画面 , 单 击 【[ 下 一 步 ] 按 钮 继续 。 选 择 【K 本 地 计算 机 】, 单 击 【下 一 步 ] 按 钮 
继续 。 

@ 选择 【创建 新 的 SQL Server 实例 .或 安装 客户 端 工具 】, 单 击 【5 下 一 步 ] 按 钮 继续 。 

@ 输入 用 户 信息 (读者 任意 输入 ) 后 , 单 击 【5 下 一 步 ] 按 钮 继续 。 在 许可 协议 页 ,选择 
【是 了 , 单 击 【5 下 一 步 ] 按 钮 继续 。 

@ 选择 【服务 器 和 客户 端 工具 了 , 单 击 【5 下 一 步 ] 按 钮 继续 。 接 受 默认 的 实例 名 , 单 击 
【下 一 步 ] 按 钮 继续 。 

@ 接受 【典型 3] 安装 类 型 , 单 击 【5 下 一 步 ] 按 钮 继续 。 选 择 【 使 用 本 地 系统 账户 了 . 单 击 
【下 一 步 ] 按 钮 继续 。 

@ 选择 身份 验证 模式 为 混合 模式 , 单 击 【 下 一 步 3 按 钮 继续 。 

@ 按照 SQL Server 购买 许可 的 实际 情况 选择 后 , 单 击 【 继 续 了 按钮 开始 安装 。 接 下 
来 按照 安装 程序 的 提示 做 就 可 以 了 。 

(2) 新 建 一 个 名 为 selectcourse 的 数据 库 .数据库 属性 让 SQL Server 自动 选择 。 

完成 本 题 的 操作 步骤 如 下 。 

@ 选择 【开始 区 程序 】 了 【Microsoft SQL ServerXI【 企 业 管理 器 3 命令 ,打开 【企业 管 
理 器 】 ,在 左 窗口 中 展开 树 , 右 击 【 数 据 库 ] 文 件 夹 ,选择 [新 建 数据 库 ] 命 令 ,系统 会 显示 【 数 
据 库 属性 对 话 框 , 如 图 9-9 所 示 。 

@ 在 【名 称 】 文 本 框 中 输入 selectcourse, 其 他 属性 让 SQL Server 自己 决定 , 单 击 【 确 
定 了 按钮 完成 新 建 数据 库 的 操作 。 

(3) 在 selectcourse 数据 库 中 ,新建 名 为 Account、Admin、Course、Selection、Student、 
Teacher 的 表 。 
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图 9-9 【数据 库 属性 3 对 话 框 


这 里 仅 给 出 Account 表 的 建立 步骤 ,其 他 表 的 做 法 可 以 类 推 ,完成 本 题 的 操作 步骤 如 
下 。 
@ 在 企业 管理 器 中 右 击 selectcourse 数据 库 ,选择 [新 建 3I【 表 命令 。 
@ 在 弹出 的 数据 表 设 计 器 窗口 中 按照 题 意 定 义 字段 名 称 `. 类 型 和 其 他 属性 ,如 
图 9-10 所 示 。 


图 9-10 定义 表 的 字段 名 称 、 类 型 和 其 他 属性 


@ 用 鼠标 选择 所 有 成 为 主键 的 字段 左边 的 小 方 格 ( 按 住 Ctrl 键 , 单 击 ), 布 击 这 些 字 
段 ( 这 里 就 是 UserNo 字段 ) ,选择 【设置 主键 】。 

@ 对 允许 为 空 ( 即 添加 记录 时 ,可 以 不 输入 值 ) 的 字段 , 单 击 * 人 允许 空 ? 列 中 的 对 应 位 
置 ,该 位 置 会 出 现 一 个 ?表明 选中 ,Account 表 中 没有 这 种 字段 ; 

加 单 击 工具 栏 中 的 贺 按 钮 保存 设置 .在 选择 【名 称 】 对 话 框 中 输入 新 表 的 名 称 
Account 并 退出 ,新 表 即 建立 完 

用 类 似 的 步骤 新 建 其 余 的 表 。 

(4) 在 新 建 的 表 中 ,输入 给 定 的 新 记录 。 

这 里 仅 给 出 如 何 向 Account 表 添 加 、 修 改 删除 记录 ,其 余 表 的 做 法 完全 一 样 ,完成 本 
题 的 操作 步骤 如 下 。 

Ox 在 企业 管理 器 中 找到 selectcourse 数据 库 图 标 , 在 其 中 选择 表 。 
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@ 在 右边 的 表 清 单 中 右 击 Account 表 .选择 [打开 表 了 区 返回 所 有 行 】 了 命令, 即 可 以 看 
到 与 Access 中 类 似 的 数据 浏览 与 输入 窗口 。 

@ 单 击 空 行 中 的 Username 字段 所 在 列 的 那个 空 方 格 , 即 可 输入 新 记录 的 
Username 字段 的 值 。 

@ 单 击 该 行 中 的 其 他 字段 或 按 Tab 键 移 动 光 标 到 下 一 字段 ,并 输入 相应 的 值 。 

@ 输入 完 一 条 新 记录 后 ,重复 第 @@ 和 第 @@ 步 的 操作 ,又 可 以 添加 另 一 条 新 记录 。 

@ 如 果 要 修改 已 有 的 记录 ,直接 单 击 要 修改 的 值 ,输入 新 值 即 可 。 

@ 如 果 要 删除 已 有 的 记录 , 单 击 该 行 记 录 前 的 小 方 格 , 来 选中 该 行 , 然 后 右 击 ,并 选 
择 【 删 除 ]。 用 此 方法 输入 Account 表 的 给 定 记 录 。 

@ 用 类 似 的 步骤 输入 其 余 表 的 给 定 记 录 ,Selection 表 初 始 为 空 , 没 有 记录 。 

(5) 配置 selectcourse 数据 库 的 ODBC DSN, 取 和 名 为 CourseSys, 完 成 本 题 的 操作 步 
骤 如 下 。 

Oz 在 服务 器 上 开始 菜单 选择 【设置 了 民 控 制 面 板 了 命令 .打开 【控制 面板 了 ,双击 【管理 
工具 】 ,双击 【数据 源 (ODBC)】。 

G@ 选择 【系统 DSN】 选 项 卡 , 单 击 【 添 加 按钮 ,选择 数据 源 的 驱动 程序 为 SQL 
Server, 单 击 【 完 成 3 按钮 。 

这 时 系统 显示 【创建 到 SQL Server 的 新 数据 源 】 对 话 框 , 在 对 话 框 的 [名 称 文 本 框 中 
输入 要 配置 的 DSN 名 称 CourseSys, 在 【服务 器 】 文 本 输入 组 合 框 中 输入 服务 器 的 IP 地 
址 ,例如 10. 10. 1. 4 或 者 选择 【KClocal)1。 

@) 单 击 [下 一 步 ] 按 钮 ,在 系统 显示 的 对 话 框 中 ,选择 【使 用 用 户 输入 登录 ID 和 密码 
的 SQL Server 验证 了 ,在 【登录 ID] 文 本 框 中 输入 管理 员 用 户 名 sa, 在 【密码 了 文本 框 中 输 
入 sa 的 密码 。( 新 安装 的 SQL Server, 初 始 密码 为 空 ,不 需要 输入 ) 

@ 单 击 【下 一 步 3 按 钮 ,选择 【更 改 默 认 的 数据 库 为 ] 复 选 框 ,并 选择 selectcourse 数 
据 库 。 

@ 单 击 【下 一 步 3 按 钮 .弹出 如 图 9-11 所 示 的 对 话 框 ,接受 默认 设置 。 


7] 


厂 对 数据 使 用 强大 的 加 密 QD 

Fo， 厅 执行 字符 数据 关 译 到) 

厂 当 输 出 货币 、 数 字 、 日 期 和 时 间 时 ， 请 使 用 区 域 设 置 u)。 

厂 将 长 时 间 运行 的 查询 保存 到 日 志文 件 G@) : 

Fw | 
长 查询 时 间 ( 毫秒 ) QD): Fo 


厂 将 _0DBC 驱动 程序 统计 记录 到 日 志文 件 @): 
ESTATS ne tub: | 


mm | wy | 


图 9-11 创建 到 SQL Server 的 新 数据 源 
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@ 单 击 【完成 了 按钮 ,在 弹出 的 对 话 框 中 , 单 击 【 测 试 数据 源 】。 

@ 如 果 测 试 成 功 则 会 出 现 如 图 9-12 所 
示 的 对 话 框 ;否则 请 检查 各 步骤 是 否 正确 设 
置 ,主要 是 名 称 和 网 络 连接 性 配置 是 否 正 确 ; 
当然 ,也 有 可 能 是 网 络 故障 , 连 不 通 数据 库 服 
务 器 。 

@@ 单 击 【确定 了 按钮 ,直到 回 到 ODBC 数 
据 源 管理 器 ,可 以 看 到 在 系统 数据 源 列 表 中 
出 现 了 “CourseSys”, SQL Server 数据 库 系 统 
DSN 配置 完成 。 

3) SELECT 语句 的 实验 

(1) 查询 书目 ,返回 所 有 书目 和 书目 的 所 
有 信息 。 图 9-12” SQL Server ODBC 数据 源 测 试 

分 析 : 

书目 的 内 容 在 哪里 ? 在 titles 表 中 ,所 以 应 从 该 表 中 选择 记录 。 那 么 如 何 表示 返回 
书目 表 的 所 有 信息 呢 ? SQL 语句 用 x* 来 表示 所 有 字段 。 因 此 ,完成 本 题 要 求 的 完整 的 
SELECT 语 身 是 : 


SQL Server 0DBC 数 笑 玫 测 试 | 


SELECT x FROM titles 


SQL Server 2000 的 企业 管理 器 可 以 用 来 实现 SQL 语句 。 

完成 本 题 的 步骤 如 下 。 

〇 打开 SQL Server 2000 的 企业 管理 器 。 

@ 打开 左边 控制 台 树 的 根 目录 ,选择 【控制 台 根 目录 了 | Microsoft SQL Servers | 
【SQL Server 组 3 (local) 【数据 库 】 pubs 攻 表 了 .在 右边 内 容 框 中 出 现 的 pubs 数据 库 的 
所 有 表 的 清单 中 ,找到 titles 表 。 

@ 选中 titles 表 , 右 击 titles 表 , 将 弹出 如 图 9-13 所 示 的 菜单 。 

@ 选择 【打开 表 了 人 区 返回 所 有 行 】 命 令 。 

加 将 会 看 到 返回 了 titles 表 的 所 有 记录 的 一 个 窗口 ,在 工具 栏 中 单 击 按钮 葬 , 该 窗 
口 将 分 为 上 下 两 格 , 下 面 的 对 话 框 显示 titles 表 的 所 有 记录 ,上 面 的 对 话 框 则 显示 出 相应 
的 SQL 语句 ,如 图 9-14 所 示 。 

@ SQL 语句 窗口 中 的 内 容 是 可 以 编辑 的 ,所 以 读者 可 以 把 自己 的 SQL 语句 输入 到 
这 个 窗口 ,然后 单 击 项 按钮 来 检查 语法 或 者 单 击 天 按钮 来 执行 SQL 语句 并 在 下 面 的 窗 
口 返 回 结果 。 

(2) 查询 书目 ,返回 所 有 书目 ,但 对 每 一 书目 . 仅 需 要 返回 书 名 、 类 型 和 价格 信息 。 

分 析 : 

题 (2) 和 题 (1) 的 唯一 区 别 是 题 (2) 指 定 了 返回 的 字段 ,而 不 是 返回 所 有 字段 。 如 何在 
SELECT 语句 中 指定 字段 呢 ? 就 要 在 SELECT 后 的 字段 列表 中 明确 的 给 出 返回 字段 
列表 。 
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The Busy Execut business 
Cooking with Col business 
You Can Combat 1business 
Straight Talk A business 
Silicon Valley 'mod_cook 
The Gourmet Mic mod_cook 
The Psychology VNDECIDED 


图 9-14 ”SQL 语句 窗口 示意 图 


因此 ,完成 题 (2) 的 要 求 的 完整 的 SELECT 语句 是 : 


SELECT title, type, price 

FROM titles 

完成 本 题 的 操作 步骤 如 下 。 

Oz 在 题 (1) 的 实验 基础 上 ,编辑 SQL 窗口 中 的 SQL 语句 ,将 它 改 为 如 问题 分 析 中 给 
出 的 SELECT 语句 。 

@ 单 击 殉 按钮 来 检查 语法 ,如 果 编 辑 中 有 错误 ,SQL Server 会 弹出 对 话 框 ,提示 错 
误 。 如 果 语 法 正确 ,将 看 到 如 图 9-15 所 示 的 对 话 框 。 
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@ 单 击 大 按钮 来 执行 SQL 语句 .将 看 到 如 图 9-16 
所 示 的 窗口 中 返回 结果 的 变化 。 BD 本 
(3) 查询 书目 , 仅 返回 类 型 为 *psychology” 的 书目 ,对 
每 一 书目 , 仅 需 要 返回 书 名 、 类 型 和 价格 信息 。 [CE ww | 


分 析 : 图 9-15 SQL 对 话 框 示意 图 
题 (3) 其 实 是 在 题 (2) 的 基础 上 进一步 对 返回 的 记录 


im SQL Server Enterprise Manager - [5: 表 "titles" 中 的 数据 :位置 是 "pubs“ 中 “oc 有 中 时 
| 往 控制 人 (CO 窗口 (Ww 帮助 (H) 
茎 | 豆 下 [过 大 | 部 | 以 对 | 外 绚 庆 匡 | 各 


The Busy Executive’ s Database Guide business 
Cooking with Computers: Surreptitious Balance Sheets business 
You Can Combat Computer Stress! business 
Straight Talk About Computers business 
Silicon Valley Gastronomie Treats mod_cook 
The Gourmet Microwave mod_cook 
The Psychology of Computer Cooking VHDECIDED 
But Is It User Friendly? Popular_comp 
Secrets of Silicon Valley popular_comp 
Net Etiquette Popular_comp 
Computer Phobic AND Non-Phobic Individuals: Behavior Yariations Psychology 
Is Anger the Enemy? psychology 
Life Without Fear psychology 


图 9-16 SQL 语句 窗口 示意 图 


做 限制 ,增加 了 选择 记录 的 条 件 。 那 么 如 何 限制 返回 的 记录 集 , 来 得 到 满足 某 些 条 件 的 记 
录 呢 ? SELECT 语句 的 WHERE 子 句 就 是 用 来 完成 这 个 功能 。 在 WHERE 子 句 中 列 出 
各 种 限制 条 件 , 对 题 (3) 来 说 ,条 件 就 是 type 王 'psychology', 表 示 返 回 的 每 一 条 记录 都 要 
满足 type 字段 的 值 等 于 ,psychology'。 注 意 SQL 语句 中 字符 串 用 单 引号 括 起 来 ,而 不 是 
用 双 引 号 。 因 此 ,完成 题 (3) 要 求 的 完整 的 SELECT 语句 是 : 

SELECT title, type, price 

FROM titles 

WHERE type = psychologyY'" 

但 是 这 样 写 可 能 有 问题 ,这 个 问题 在 本 书 中 也 曾 多 次 提 到 过 , 即 在 输入 书目 数据 的 时 
候 , 如 果 type 字段 多 了 多 余 的 空格 ,虽然 人 眼睛 看 不 出 来 ,但 是 计算 机 会 认为 有 空格 和 没 
有 空格 是 不 同 的 值 。 因 此 ,在 写字 符 串 比较 时 ,比较 保险 的 做 法 是 比较 前 先 去 掉 多 余 空 
格 ,除非 输入 时 就 能 够 保证 字段 不 会 有 多 余 空格 。 

修改 后 的 SELECT 语句 如 下 : 

SELECT title, type. price 


FROM titles 
WHERE (LTRIM(RTRIM(type)) = psychology’) 
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其 中 ,LTRIM() 函数 删除 左边 的 多 余 空 格 ,RTRIM() 函数 删除 右边 的 多 余 空 格 ， 
LTRIM(RTRIM(type)) 的 意义 就 是 先 把 type 删除 右边 的 空格 ,再 把 得 到 的 字符 串 删除 
左边 的 空格 ,从 而 得 到 的 没有 左右 多 余 空格 的 字符 串 。 

完成 本 题 的 操作 步骤 如 下 。 

Oz 在 题 (1) 的 实验 基础 上 ,编辑 SQL 窗口 中 的 SQL 语句 ,将 它 改 为 如 问题 分 析 中 给 
出 的 SELECT 语句 。 

@) 单 击 大 按钮 来 执行 SQL 语句 ,将 看 到 如 图 9-17 所 示 的 窗口 中 返回 结果 的 变化 。 


im SQL Server Enterprise Manager - [5: 表 "titles“ 中 的 数 磊 ， 位 于 是 Pubs AIKIGESIEE 


中 篇 控制 台 (CO 窗口 (帮助 (H) | = xl 
EIESEEIE 攻 本 下: 何 隐 且 9 有 


ELECT title, type, price 


RDM titles 
HERE (LTRIM (RTRIN (type)) = “psychology’ ) 


title [type [price 

Computer Phobic AND Non-Phobic Individuals: Behavior Variations psychology 21.59 

Is Anger the Enemy? psychology 10.95 

Life Without Fear 了 Psychology 

Prolonged Data Deprivation: Four Case Studies psychology 19.99 

Emotional Security: A New Algorithm psychology 7.99 
E3 


= 一 一 了 于 一 症 证 一 = 开 


图 9-17 ”SQL 语句 窗口 示意 图 


(4) 查询 书目 ,返回 内 容 与 题 (2) 相 同 , 但 要 对 返回 的 记录 排序 ,首先 按照 书 的 类 型 排 
序 , 如 果 类 型 相同 , 则 按照 价格 由 高 到 低 排 序 。 

分 析 : 

题 (4) 是 在 题 (2) 的 基础 上 对 返回 的 记录 做 排序 ,并 且 是 多 重 排序 。SELECT 语句 如 
何 实 现 排序 呢 ? SELECT 语句 的 ORDER 子 句 用 来 完成 这 个 功能 。 在 ORDER BY 子 句 
中 列 出 用 于 排序 的 各 个 字段 ,字段 按 排序 的 有 限 顺 序 排列 ,也 就 是 说 返回 结果 将 先 对 
ORDER BY 中 先 列 出 的 字段 排序 ,只 有 前 面 的 字段 值 都 相等 , 才 会 用 到 后 面 列 出 的 字段 
来 排序 。 对 题 (4) 来 说 ,应 该 排 成 type， price DESC。 其 中 DESCENDING 表示 用 price 
字段 排序 时 , 按 从 大 到 小 的 反 序 。 因 此 ,完成 题 (4) 的 要 求 的 完整 的 SELECT 语句 是 : 

SELECT title., type, price 


FROM titles 
ORDER BY type, price DESC 


完成 本 题 的 操作 步骤 如 下 。 
@ 在 题 (2) 的 实验 基础 上 ,编辑 SQL 窗口 中 的 SQL 语句 .将 它 改 为 如 [问题 分 析 3 中 


给 出 的 SELECT 语句 。 
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@ 单 击 天 和 按钮 来 执行 SQL 语句 ,将 看 到 如 图 9-18 所 示 的 窗口 中 返回 结果 的 变化 。 


“locaD ”FE 


BELECT title, type, price 
RON titles 


eptitious Balance Sheets 
人 You Can Conbat Computer Stress! 
(|Silicon Valley Gastronomic Treats 


ts of Silicon Valley 
les tiquette | 
[| Computer Phobic AND Non-Phobic Individuals: Behavior Variations 
(| Prolonged Data Deprivation: Four Case Studies 
[|Is Anger the Enemy? 
Emotional ecurity: A New Algorithm 


后 


图 9-18 SQL 语句 窗口 示意 图 


(5) 查询 书目 ,返回 所 有 书目 ,对 每 一 书目 ,需要 返回 书 名 、 类 型 单价 和 出 版 商 名称 。 

分 析 : 

题 (5) 比 题 (2) 多 指定 了 一 个 字段 ,但 是 事情 并 非 如 此 简单 ,因为 出 版 商 名 称 信息 在 
titles 表 中 没有 ,而 是 要 到 publishers 表 中 才能 找到 。SELECT 语句 不 行 了 吗 ? 其 实 当 碰 
到 需要 到 多 个 表 中 取 数 据 的 情况 时 ,可 以 在 SELECT 语句 的 FROM 字句 中 指定 多 个 表 。 
对 题 (5) 来 说 ,这 样 就 能 完成 任务 了 吗 ? 还 不 行 , 因 为 题 (5) 要 选取 的 记录 虽然 取 自 两 个 
表 , 但 是 这 些 记 录 不 是 随便 从 两 个 表 取 出 来 搭配 的 ,取出 来 的 那些 都 是 两 个 表 通 过 pub_ 
id 字段 相关 连 起 来 的 字段 值 ,也 就 是 说 两 个 表 通 过 pub_id 字段 连接 成 一 个 虚拟 的 大 表 ， 
pub_id 一 样 的 那些 行 才能 连接 在 一 起 成 为 大 表 的 记录 。 从 另 一 个 角度 讲 , 从 titles 表 中 
选 定 一 条 记录 后 ,要 得 到 相应 的 出 版 商 名 字 , 不 是 到 publishers 表 中 找 所 有 的 出 版 商 名 
字 , 而 是 找到 那个 出 版 商 , 它 的 pub_id 与 titles 表 中 选 出 的 那 条 记录 的 pub_id 相 吻 合 。 

综 上 所 述 , 从 多 个 表 选 取信 息 , 通 过 FROM 子 句 中 指定 多 个 表 来 实现 ;连接 表 , 则 通 
过 WHERE 子 句 约束 关联 字段 相等 来 实现 。 那 么 ,如 何 表示 来 自 不 同 表 的 同名 字段 呢 ? 
就 要 用 字段 的 全 名 称 的 形式 : [ 表 名 ].[ 字 段 名 ]。 因 此 ,完成 题 (5) 的 要 求 的 完整 的 
SELECT 语 向 是 : 

SELECT title, type, price, pub_ name 

FROM titles, publishers 

WHERE titles. pub_id = publishers.pub_ id 


注意 : 
在 实际 使 用 中 ,建议 在 连接 多 个 表 时 .所 有 的 字段 都 用 全 名 称 来 引用 ,避免 二 义 性 。 
完成 本 题 的 操作 步骤 如 下 。 
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@ 在 题 (2) 的 实验 基础 上 ,编辑 SQL 窗口 中 的 SQL 语句 ,将 它 改 为 如 问题 分 析 中 给 
出 的 SELECT 语句 。 
@ 单 击 大 按钮 来 执行 SQL 语句 ,将 看 到 如 图 9-19 所 示 的 窗口 中 返回 结果 的 变化 。 


ROW titles INNER JOIN 
publishers ON titles, pub_id = publishers. pub_id 


i = 
Cooking with Computers: Surreptitious Balance Sheets 


ou Can Combat Computer Stress! 


Psy ey 
Psychology 
Psychology 


图 9-19 SQL 语句 窗口 示意 图 


注意 : 

企业 管理 器 自动 把 所 有 字段 变 成 了 全 名 称 , 并 且 把 SELECT 语句 自动 转换 成 
INNER JOIN 形式 的 表 连 接 的 专用 写法 ,两 种 写法 都 可 以 。 

(6) 查询 书目 ,返回 所 有 书目 的 书 名 、 类 型 和 作者 ,并 将 返回 结果 按照 作者 顺序 排序 ， 
从 第 一 作者 开始 ,当然 首先 同一 本 书 的 记录 要 排 在 一 起 。 

分 析 : 

题 (6) 综 合 了 题 (1) 一 题 (5) 的 知识 点 ,读者 可 以 尝试 操作 ,所 不 同 的 是 这 一 次 需要 连 
接 3 个 表 , 因 为 选 出 来 的 字段 加 上 用 于 排序 的 字段 ,分 别 来 自 三 个 关联 在 一 起 的 表 。 完 成 
题 (6) 要 求 的 完整 的 SELECT 语句 是 : 

SELECT title, type., au fname+''+au lname 

FROM titles, titleauthor, authors 

WHERE titleauthor.title id = titles.title id AND titleauthor.au id = authors.au id 

ORDER BY title., au_ ord 

在 实际 使 用 中 ,建议 读者 在 连接 多 个 表 时 ,所 有 的 字段 都 用 全 名 称 来 引用 ,避免 二 

完成 本 题 的 操作 步骤 如 下 。 

Oz 在 题 (2) 的 实验 基础 上 ,编辑 SQL 窗口 中 的 SQL 语句 ,将 它 改 为 如 问题 分 析 中 给 
出 的 SELECT 语句 。 

@ 单 击 状 按钮 来 执行 SQL 语句 ,将 看 到 如 图 9-20 所 示 的 窗口 中 返回 结果 的 变化 。 

4) UPDATE 语句 的 实验 
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"in SQL Server Enterprise Manager - [5: 表 "tities" 中 的 数 枯 位 村 是 ;EuGsiehs 
」 往 控制 各 (C) 窗口 (WwW) 帮助 (t) 
加 | 至 训 | 到 太 | 吕 | |9U 2 左 | 0 | 


”+ authors. au lname AS Exprl 


ELECT titles. title, titles type, authors au fnane 十 
JOIN 


RON titles 
titleauthor ON titles. title_id = titleauthor. title_id INNER JOIN 
authors. au_id 


authors ON titleauthor. au_id 
ord 局 
» 


RDER BY titles. title, titleauthor. 


[type |Expr1 加 
a ay popular comp Cheryl Carson 
Computer Phobic AND Non-Phobic Individuals: Behavior Variations psychology Livia Karsen 


Computer Phobic AND Non-Phobic Individuals: Behavior Variations ‘psychology Stearns MacFeat 

Cooking with Computers; Surreptitious Balance Sheets business Stearns MacFeat 

Cooking with Computers: Surreptitious Balance Sheets business Michael DO Leary 

Emotional Security: A New Algorithm psychology Charlene Locksl 

Fifty Years in Buckineham Palace Kitchens trad_cook Reginald Blotch 

Is Anger the Enemy? psychology Albert Ringer 

Is Anger the Enemy? psychology Anne Ringer 

Life Without Fear psychology Albert Ringer 

et Etiquette Popular_comp Charlene Locksl 

Onions, Leeks, and Garlic: Cooking Secrets of the Mediterranean trad_cook Sylvia Panteley 

Prolonged Data Deprivation: Four Case Studies psychology Johnson White 局 
»[ 


图 9-20 SQL 语句 窗口 示意 图 


将 书目 中 类 型 为 “business” 的 书 ,都 降价 1 元 。 

分 析 : 

相对 来 说 UPDATE 语句 就 比较 简单 ,一般 同时 只 能 更 新 一 个 表 , 指 定 每 个 要 更 新 的 
字段 设 成 什么 新 值 ,新 的 值 可 能 从 老 的 值 的 基础 中 来 ,也 可 能 完全 是 新 的 和 老 的 值 毫 无 关 
系 。WHERE 子 负 用 于 指明 要 更 新 记录 的 范围 。 按 照 要 求 ,完整 的 UPDATE 语句 是 : 


UPDATE titles 
SET price = price -1 
WHERE type = ‘business’ 


完成 本 题 的 操作 步骤 如 下 。 Eee > 

OO 编辑 SQL 窗口 中 的 SQL 语句 .将 它 改 为 如 问题 分 析 
中 给 出 的 UPDATE 语句 。 人 

@ 单 击 居 按钮 来 执行 SQL 语句 ,将 看 到 如 图 9-21 所 [a .| 
示 的 信息 ,指出 有 多 少 条 记录 被 改变 。 图 9-21 SQL 对 话 框 示意 图 

5) INSERT 语句 的 实验 

添加 一 个 新 的 作者 , 它 的 相关 信息 如 表 9-7 所 示 。 

分 析 : 

INSERT 语句 也 比较 简单 ,一 个 语句 只 对 一 个 表 做 插入 ,指定 好 要 指定 值 的 字段 列 
表 , 并 在 VALUES 子 负 中 指定 按照 相同 顺序 排列 的 值 的 列表 。 按 照 要 求 , 完 整 的 
INSERT 语句 是 : 


INSERT INTO authors (au_ id, au lname. au fname. phone. address, city. state, zip, contract) 
VALUES (‘007-00-0007'. Bond', James', 007007', Unknown', Everywhere', NO'. 00007', 1) 


完成 本 题 的 操作 步骤 如 下 。 
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| 编辑 SQL 窗口 中 的 SQL 语句 ,将 它 改 为 如 问题 分 析 中 给 出 的 INSERT 语句 。 

@ 单 击 出 按钮 来 执行 SQL 语句 ,将 看 到 如 图 9-22 所 示 的 信息 ,指出 有 多 少 条 记录 
被 插入 。 

6) DELETE 语句 的 实验 

删除 所 有 姓 “Bond” 名 “James” 的 作者 。 

分 析 : 

DELETE 语句 通过 WHERE 子 句 中 指定 待 删除 的 那些 记录 所 共同 满足 的 特征 条 
件 。 按 照 要 求 ,完整 的 DELETE 语句 是 : 

DELETE FROM authors 

WHERE au lname = Bond' AND au fname = James' 


同样 ,建议 读者 在 比较 字符 串 前 , 先 去 掉 多 余 空格 。 这 样 完整 的 语句 变 为 : 


DELETE FROM authors 
WHERE LTRIM(RTRIM(au_ lname)) = 'Bond' AND LTRIM(RTRIM(au fname)) = James' 


完成 本 题 的 操作 步骤 如 下 。 
@ 编辑 SQL 窗口 中 的 SQL 语句 .将 它 改 为 如 问题 分 析 中 给 出 的 DELETE 语句 。 
@) 单 击 大 按钮 来 执行 SQL 语句 ,将 看 到 如 图 9-23 所 示 的 信息 ,指出 有 和 多少 条 记录 
被 删除 ,注意 同名 同姓 的 人 有 可 能 很 多 。 
(i) 1 行 被 上 次 查询 影响 
CE ww | 


图 9-22 SQL 对 话 框 示意 图 图 9-23 SQL 对话 框 示 意图 


[soL server SS | 
(3) 1 


EE 


4. 实验 后 的 思考 题 


(1) 为 什么 SQL Server 比 Access 更 加 适合 用 作 Web 应 用 的 数据 库 ? 
(2) 如 何在 SQL Server 里 测试 SQL 语句 ? 
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ee 10 建立 Web 应 用 开发 及 运行 
天 驻 - 环境 的 实验 


1. 实验 的 目的 与 要 求 


(1) 掌握 IIS 的 安装 。 

(2) 掌握 Web 站 点 的 建立 和 设置 。 

(3) 掌握 FTP 站 点 的 建立 和 设置 。 

(4) 掌握 基本 的 网 络 诊断 方法 。 

(5) 学 会 建立 面向 Web 应 用 开发 的 Dreamweaver 站 点 。 


2. 实验 的 操作 内 容 


1) 安装 和 设置 IIS 

(1) 安装 IIS, 使 之 提供 Web 服务 和 FTP 服务 。 

(2) 在 本 地 客户 机 上 用 浏览 器 访问 默认 的 Web 服务 ,看 看 有 些 人 什么。 停止 默认 Web 
站 点 ,再 用 浏览 器 访问 试 试 。 启 动 默 认 Web 站 点 后 再 试 试 。 

2) 建立 和 设置 Web 站 点 

(1) 修改 服务 器 的 配置 ,给 服务 器 的 网 卡 增 加 一 个 IP 地 址 (具体 的 地 址 请 实验 指导 
老师 给 出 ,应 该 是 与 服务 器 的 网 卡 在 同一 子 网 的 地 址 ,以 避免 网 络 设计 中 复杂 的 路 由 策 
略 ,实际 上 ISP 也 是 这 么 分 配 的 )。 

(2) 建立 一 个 名 为 “My site” 的 新 Web 站 点 ,该 Web 站 点 明确 使 用 新 增加 的 那个 IP 
地 址 (如 果 不 明确 设置 ,将 和 默认 Web 站 点 一 样 ,使 用 服务 器 上 所 有 未 分 配 的 IP 地 址 )， 
使 用 Web 服务 的 默认 TCP 端口 ,并 使 用 读者 新 建 的 C: My Web Site 作为 主 文件 夹 。 
My site 站 点 将 用 作 后 续 实 验 的 主 站 点 。 

3) 建立 和 设置 FTP 站 点 

在 服务 器 上 建立 与 题 2) 中 的 My site 相对 应 的 FTP 站 点 ,名 为 “My site Directory”， 
使 用 “My site”Web 站 点 的 IP 地 址 ,用 于 访问 “My site”Web 站 点 的 主 文件 夹 。 该 FTP 
站 点 将 在 后 续 实 验 中 被 Dreamweaver 站 点 用 于 上 传 、 下 载 文 件 和 同步 站 点 。 

4) 基本 的 网 络 诊断 

(1) 用 ping 命令 测试 站 点 通过 网 络 可 达 。 

(2) 验证 Web 服务 可 以 访问 。 

(3) 验证 FTP 服务 可 以 访问 。 


5) 建立 面向 Web 应 用 的 Dreamweaver 站 点 

(1) 在 本 地 客户 机 的 Dreamweaver 中 新 建 一 个 名 为 My site 的 站 点 ,对 应 服务 器 上 的 
“My site”*Web 站 点 ,并 通过 FTP 方式 来 上 传 、 下 载 和 同步 *My site”Web 站 点 的 文件 。 除 此 
之 外 ,要 求 新 站 点 支持 ASP VBScript 技术 ,并 且 这 个 站 点 支持 多 人 的 团队 协同 开发 。 

(2) 新 建 一 个 页 面 ,保存 在 本 地 站 点 My site 下 ,同步 站 点 后 ,看 一 看 服务 器 的 “My 
site”Web 站 点 的 主 文件 夹 下 有 什么 变化 。 在 Dreamweaver 中 从 My site 站 点 中 删除 此 
文件 ,然后 同步 站 点 ,再 看 一 看 服务 器 的 主 文件 夹 的 变化 。 

(3) 在 本 地 客户 机 建立 My site 站 点 ( 指 Dreamweaver 站 点 ) 内 所 有 动态 页 面 共 享 的 
数据 库 连 接 , 取 名 为 CourseSys ,使 用 服务 器 上 的 同名 的 ODBC 系统 DSN 设置 。 

(4) ( 选 做 ) 建 立 My site 站 点 ( 指 Dreamweaver 站 点 ) 内 所 有 动态 页 面 共 享 的 数据 库 
连接 , 取 名 为 CourseSys, 使 用 服务 器 上 的 对 应 Access 下 的 selectcourse 的 ODBC 系统 
DSN 设置 CCourseSys6 ) 。 


3. 实验 的 参考 步骤 


1) 安装 和 设置 IIS 

(1) 安装 IIS, 使 之 提供 Web 服务 和 FTP 服务 。 

以 下 步骤 仅 在 安装 服务 器 时 没有 安装 IIS 或 当时 没有 完全 安装 的 情况 下 才 是 必要 
的 ,其 操作 步骤 如 下 。 

打开 Windows 2000 系统 的 控制 面板 ,双击 【添加 /删除 程序 了 按钮 。 

@) 选择 [添加 /删除 Windows 组 件 】。 

G@) 在 打开 的 Windows 组 件 向 导 的 组 件 列表 中 选择 【Internet 信息 服务 (IIS)】, 单 击 
【详细 信息 3 按钮 。 

@ 勾 选 需要 安装 的 组 件 ,除了 默认 选中 的 组 件 外 ,确保 选中 Internet 服务 管理 器 、 
World Wide Web 服务 器 ,文件 传输 协议 (FTP) 服 务 器 和 公共 文件 ,这 些 是 必需 的 。 

@ 单 击 【 确 定 3 按 钮 ,确认 并 退出 IIS 组 件 选 择 , 再 单 击 【 下 一 步 3 按 钮 .确认 并 开始 IIS 
安装 , 接 下 来 Windows 会 自动 进行 安装 过 程 直到 结束 。 

(2) 用 浏览 器 访问 默认 的 Web 服务 ,看 看 有 些 什 么 。 停 止 默认 Web 站 点 ,再 用 浏览 
器 访问 试 试 。 启 动 默认 Web 站 点 后 再 试 试 。 其 操作 步骤 如 下 : 

@ 在 客户 机 上 打开 Internet Explorer, 在 地 址 栏 输入 安装 了 IIS 的 服务 器 的 IP 地 址 
并 按 回 车 键 , 可 以 看 到 以 下 信息 。 这 是 正常 的 ,因为 新 安装 的 默认 站 点 没有 设 定 默认 的 
首页 ,服务 器 不 知道 把 哪 一 个 页 面 作为 第 一 个 页 面 给 用 户 看 。 


您 想 要 链接 的 站 点 目前 没有 默认 页 。 可 能 正在 进行 升级 。 


请 稍 候 再 试 此 站 点 。 假 如 问题 仍然 存在 .请 与 Web 站 点 管理 员 联 系 。 

注意 : 

在 打开 Internet 信息 管理 器 , 右 直 【默认 Web 站 点 了 .选择 【属性 了 菜单 ,在 属性 对 话 框 
里 选择 进入 【文档 3 页 ,可 以 看 到 如 图 10-1 所 示 的 默认 页 面 定 义 。 它 代表 了 当 用 户 访问 这 
个 Web 站 点 时 ,IIS 会 自动 依次 找 以 下 名 字 的 页 面 作 为 站 点 的 首页 呈现 给 用 户 。 所 以 请 
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注意 , 当 读 者 定义 自己 的 Web 站 点 时 , 别 忘 了 把 自己 站 点 的 首页 命名 为 这 里 的 某 个 默认 
的 名 字 或 者 把 自己 首页 的 文件 名 加 到 这 里 。 


21xl 
Web 站 点 | 操作 员 | 性 能 | Ishrr 总 选 器 | 主 B 录 | 
文档 | ”目录 安 人 性。 | ITP 头 | 。 自 定义 错误 信息 | 
Dstt eee 当当 mw.. | 
ty 
5 汉 站 | C2 


[六 f 局 用 文档 页 脚 @) 
[ 浏 唤 应 放 | 


取消 | 应 用 2) | 天助 | 
图 10-1 上 默认 页 面 定义 


@ 在 安装 了 IIS 的 服务 器 上 打开 Internet Explorer, 在 地 址 栏 输入 服务 器 的 IP 地 址 
并 按 回 车 键 ,系统 将 弹出 一 个 窗口 来 验证 用 户 身份 ,输入 Windows 的 用 户 名 和 口令 后 ,可 
以 看 到 弹出 的 IIS5.0 的 文档 Web 页 面 。( 条 件 所 限 , 客 户 机 和 服务 器 也 可 以 是 同一 人 台 机 
器 ,这 时 读者 只 能 看 到 服务 器 上 的 情况 ) 

@ 在 服务 器 上 Windows【 开 始 ] 麻 单 中 选择 【程序 3I【 管 理工 具 】IKInternet 服务 管理 
器 3 命令 ,来 打开 KInternet 信息 服务 了 窗口 .在 左边 的 树 中 打开 和 服务 器 机 器 名 同名 的 图 
标 , 右 击 【 默 认 Web 站 点 】 ,并 选择 [停止 3 命令 来 停止 默认 Web 站 点 。 

@ 在 客户 机 上 重新 打开 Internet Explorer( 重 新 打开 ,防止 因 浏 览 器 缓存 造成 的 不 真 
实 结 果 ) ,在 地 址 栏 输入 安装 了 IIS 的 服务 器 的 IP 地 址 并 按 回 车 键 ,将 看 到 找 不 到 服务 器 
的 信息 。 如 果 在 服务 器 上 运行 ,将 得 到 同样 的 信息 。 说 明 站 点 不 在 工作 状态 。 

@@ 回 到 Internet 信息 管理 器 . 右 击 【默认 Web 站 点 了 .选择 【启动 了 命令 来 启动 默认 Web 
站 点 。 再 到 客户 机 和 服务 器 上 用 浏览 器 试 试 ,将 恢复 最 初 的 情况 ,说 明 站 点 恢复 工作 。 

2) 建立 和 设置 Web 站 点 

(1) 修改 服务 器 的 配置 ,给 服务 器 的 网 卡 增加 一 个 IP 地 址 (具体 的 地 址 请 实验 指导 
老师 给 出 ,应 该 是 与 服务 器 的 网 卡 在 同一 子 网 的 地 址 ) ,建立 一 个 名 为 “My site” 的 新 Web 
站 点 ,该 Web 站 点 明确 使 用 新 增加 的 那个 IP 地 址 ,使 用 Web 服务 的 默认 TCP 端口 ,并 
使 用 实验 者 新 建 的 C: \My Web Site 作为 主 文件 夹 。 

假设 服务 器 网 卡 的 IP 地 址 是 10. 10. 1. 3( 掩 码 255. 0. 0. 0 ,默认 网 关 10. 12. 2. 17) , 假 
设 给 网 卡 分 配 的 新 地 址 是 10. 10. 1. 4( 为 简化 实验 .避免 复杂 的 路 由 策略 , 它 与 原 地 址 应 
在 同一 个 子 网 中 ,因此 , 掩 码 和 默认 网 关 与 原 地 址 一 样 )。 首 先 , 应 给 网 卡 添加 新 地 址 , 操 
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作 步 骤 如 下 。 

@ 在 服务 器 的 桌面 上 ,找到 【网 上 邻居 图标, 选中 并 且 右 击 它 。 

@ 选择 [属性 命令 ,将 会 出 现 [ 网 络 和 拨号 连接 窗口 ,如 图 10-2 所 示 。 

@ 选择 服务 器 用 于 实验 的 那 块 网 卡 的 图 标 ( 如 果 服 务 器 只 有 一 块 网 卡 ,那么 就 是 “本 
地 连接 ”图 标 ) ,并 且 右 击 它 。 

@ 选择 【属性 了 命令 ,将 会 弹出 如 图 10-3 所 示 的 网 卡 属性 对 话 框 。 


有 本 地 连接 尾 竹 


交 网 络 和 拔 号 连接 


语文 件 夹 包含 本 机 的 网 络 连 接 信 
最 ， 以 及 天助 纸 和 建新 血 撞 9 向 


图 10-2 网络 和 拨号 连接 窗口 图 10-3 本 地 连接 属性 窗口 


@ 选择 组 件 列表 框 中 的 【Internet 协议 (TCP/IP)】, 单 击 【 属 性 ] 按 钮 ,将 出 现 
【Internet 协议 (TCP/1IP) 属 性 3 对 话 框 ,如 图 10-4 所 示 。 

@) 给 一 块 网 卡 分配 多 个 地 址 ,需要 用 到 [高 级 3 选项 ,因此 , 单 击 【高 级 按钮 。 将 会 看 
到 [高 级 TCP/IP 设置 3 对 话 框 , 如 图 10-5 所 示 。 


Internet 协议 (TCP/IP) 屋 性 


图 10-4 ”Internet 协议 (TCP/IP) 属 性 图 10-5 【高 级 TCP/IP 设置 了 对 话 框 
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中 在 IP 地 址 框 中 , 单 击 【 添 加 】 按 钮 .如 Ia  :x| 
图 10-6 所 示 设 置 IP 地 址 和 子 网 掩 码 。 TP 地 址 加 ): Po so0 1 21 


单 击 【 添 加 3 按钮 后 .可 以 看 到 [TCP/IP 设 “了 RBE) 55 0 0 0 
置 3 对 话 框 ( 见 图 10-7) 中 的 IP 地 址 部 分 .多 了 一 
个 新 的 地 址 。 

@@ 单 击 【确定 3 按钮 ,再 单 击 【 确 定 ] 按 钮 , 完 


图 10-6 ”TCP/IP 地 址 框 


[RTP/P 翅 二 下 
王 设 置 |ms |wrms | 选项 | 
太阳 地 址 EB) 
下 地址 | 子 同 措 码 
10.10.1.3 255.0.0.0 
10. 10.1.2 255.0.0.0 
Es 0. | Ww | 
默认 网 关 @) 


10.12.2.17 1 


图 10-7 【高 级 TCP/IP 设置 ] 对 话 框 


网 卡 设置 。 

注意 : 

可 以 选择 Windows 开 始 了 菜单 中 的 【附件 了 区 命令 提示 符 】 命 令 . 然 后 输入 ipconfig 命 
令 来 查看 本 机 器 的 所 有 网 卡 的 IP 地 址 设置 .再 用 命令 Exit 返回 。 

(2) 接 下 来 的 是 按 题 意 建立 一 个 新 站 点 ,其 操作 步骤 如 下 。 

JD 首先 在 服务 器 的 硬盘 中 新 建 一 个 文件 夹 , 作 为 新 Web 站 点 的 主 文件 夹 ,例如 C:N\ 
My Web Site。 

@) 选择 [开始 3I【 程 序 3I【 管 理工 具 ] 命 令 .打开 【Internet 服务 管理 器 窗口 ,在 左 窗口 
中 右 击 本 服务 器 的 图 标 , 选 择 [ 新 建 3IK〖Web 站 点 了 命令 .系统 将 会 显示 Web 站 点 创建 
向 导 。 

@) 单 击 【 下 一 步 ] 按 钮 ,在 Web 站 点 [说明] 处 输入 “My site”( 这 个 说 明 将 会 代表 新 的 
Web 站 点 显示 在 Internet 信息 管理 器 的 左 窗口 里 的 树 中 )。 

@ 单 击 【 下 一 步 3 按 钮 ,在 【输入 Web 站 点 使 用 的 IP 地 址 3 下 拉 菜 单 中 选择 刚刚 添加 
的 新 的 IP 地 址 ,例如 10. 10. 1. 4, 在 【此 Web 站 点 应 使 用 到 的 TCP 端口 (默认 : 80)] 处 ， 
接受 默认 的 80, 不 必 改 动 。 

@ 单 击 【 下 一 步 3 按 钮 .在 主 文件 夹 路 径 输入 框 中 ,输入 第 1 步 中 建立 的 文件 夹 的 路 
径 C: \My Web Site, 并 选择 [允许 匿名 访问 此 Web 站 点 了 复 选 框 。 
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@ 单 击 【5 下 一 步 ] 按 钮 ,并 选择 【 读 取 ] 和 【运行 脚本 权限 。 

@) 单 击 【5 下 一 步 ] 按 钮 ,并 单 击 【完成 3 按钮 完成 新 站 点 的 建立 。 

3) 建立 和 设置 FTP 站 点 

建立 与 题 2) 中 的 My site 相对 应 的 FTP 站 点 ,名 为 “My site Directory”, 使 用 “My 
site”Web 站 点 的 IP 地 址 ,用 于 访问 “My site”Web 站 点 的 主 文 件 夹 。 

完成 本 题 的 操作 步骤 如 下 。 

@D 打开 Internet 服务 管理 器 ,在 左 窗口 中 右 击 本 服务 器 图 标 ,选择 【新 建 ]KFTP 站 
点 命令 ,将 会 出 现 FTP 站 点 创建 向 导 。 

@) 单 击 【5 下 一 步 ] 按 钮 ,在 FTP 站 点 【说 明 】 处 输入 "My site Directory”( 这 个 说 明 将 
会 代表 新 的 FTP 站 点 显示 在 Internet 信息 管理 器 的 左 窗 口 里 的 树 中 ) 。 

@ 单 击 【5 下 一 步 ] 按 钮 ,在 【输入 FTP 站 点 使 用 的 IP 地 址 了 下 拉 菜 单 中 选择 题 (2) 中 
的 四 中 的 My site 站 点 的 IP 地 址 ,例如 10. 10. 1. 4, 在 【此 FTP 站 点 应 使 用 到 的 TCP 端 
口 ( 默 认 一 21)3 处 ,接受 默认 的 21, 不 必 改 动 。 

@ 单 击 【下 一 步 3 按 钮 ,在 主 文件 夹 路 径 输入 框 中 输入 题 (2) 中 的 My site 站 点 的 主 文 
件 夹 的 路 径 C: \My Web Site。 

@ 单 击 【5 下 一 步 ] 按 钮 ,并 选择 【 读 取 和 【 写 人 3 权限 。 

@ 单 击 【 下 一 步 3 按 钮 .并 单 击 【 完 成 按钮 .完成 新 站 点 的 建立 。 

@ 为 了 保证 FTP 站 点 的 安全 性 ,不 让 来 自 Internet 的 用 户 任意 登录 FTP 站 点 ,删改 
站 点 中 的 文件 ,应 禁止 匿名 访问 , 即 右 击 新 建 的 “My site Directory”, 选 择 【 属 性 了 命令 。 

@ 选择 [安全 账号 3 选项 卡 , 取 消 [ 允 许 匿 名 连接 】 选 项 前 的 “VV”, 单 击 【 确 定 3 按 钮 完 
成 设置 。 

注意 : 

在 做 完 第 @ 步 后 ,用 浏览 器 访问 FTP 站 点 试 一 试 ,即使 用 ftp: //10. 10. 1.4。 在 做 
完 第 图 步 后 ,重新 打开 浏览 器 ,再 尝试 访问 “My site Directory”FTP 站 点 ,查看 有 什么 不 
同 。 有 兴趣 的 读者 还 可 以 研究 一 下 FTP 站 点 的 属性 设置 。 

4) 基本 的 网 络 诊 断 

(1) 用 ping 命令 测试 站 点 通过 网 络 可 达 。 

当 检查 一 个 Web 站 点 是 否 正常 工作 时 ,首先 要 确定 网 络 是 否 连 通 , 首 先 要 保证 客户 
机 与 服务 器 能 连通 。 读 者 可 以 用 ping 命令 来 验证 。ping 的 命令 格式 为 : 

ping 一 站 点 域名 二 或 者 一 站 点 IP 地 址 二 

例如 ,要 检查 新 浪 Web 站 点 是 否 从 网 络 上 可 达 , 可 以 选择 Windows[ 开 始 了 荣 单 中 的 
【附件 3IK 命 令 提示 符 】 ,输入 以 下 命令 : 

ping www. sina. com. cn 


图 10-8 是 这 个 命令 的 执行 结果 。 

可 以 看 到 ,ping 命令 首先 解析 出 域名 www. sina. com. cn 对 应 的 IP 地 址 是 211. 144. 
92. 241。 然 后 发 起 4 次 连通 尝试 并 得 到 回答 (Reply from 211. 114. 92. 241)。 从 回答 中 
可 以 看 出 ,站 点 的 响应 时 间 分 别 为 第 一 次 8 毫秒 ,第 二 次 7 毫秒 ,第 三 次 8 毫秒 ,第 四 次 7 
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‘Adninis 


图 10-8 ”ping 命令 的 输出 


毫秒 。TTL 为 访问 说 过 的 网 络 节点 数 , 说 明 这 个 站 点 
面 的 部 分 为 统计 数据 ,表明 发 出 的 数据 包 为 4 本 ; 收 到 为 4 个 , 包 丢 失 率 为 0% ,这 个 例子 
说 明 到 该 站 点 的 网 络 状况 很 好 

当 域 名 无 法 解析 时 ,ping 命令 的 输出 如 图 10-9 所 示 


党 


图 10-9 域名 解析 有 问题 


这 时 需要 检查 客户 机 的 TCP/IP 设置 是 否 有 问题 ,主要 是 域名 服务 器 有 没有 设置 对 ， 
域名 服务 器 是 否 正 常 工作 。 读 者 同样 可 以 用 ping 命令 来 验证 能 不 能 连通 域名 服务 器 ,不 
通 说 明 到 域名 服务 器 的 网 络 连 通 性 有 问题 或 者 域名 服务 器 死 了 。 也 可 以 直接 ping 站 点 
的 IP 地 址 来 测试 ,如 果 能 通 . 说 明 是 域名 解析 有 问题 。 

当 网 络 不 通 、 站 点 的 服务 器 死机 或 者 服务 器 根本 没 开 时 ,ping 命令 的 输出 如 图 10-10 
所 示 。 


实验 0 建立 web 应 用 开发 及 运行 环境 的 实验 ls 


pcuments and Settin， 


32 bytes of data: 


图 10-10 ”ping 命令 的 输出 


可 以 看 到 ,站 点 IP 地 址 正常 的 解析 出 来 了 .但 是 没有 收 到 站 点 的 应 答 , 可 能 网 络 不 
通 ,也 可 能 是 站 点 不 通 。 这 时 可 以 试 试看 访问 其 他 站 点 ,如 果 其 他 站 点 可 以 访问 ,说 明 是 
站 点 不 通 , 网 络 是 好 的 

如 果 其 他 站 点 也 不 能 访问 , 那 说 明 网 络 可 能 有 问题 。 这 时 ,读者 可 以 ping 自己 的 网 
关 试 试 , 查 看 是 不 是 本 地 网 络 的 问题 

用 ipconfig 命令 可 以 看 到 自己 的 网 关 地 址 ,如 图 10-11 所 示 


Adnini 


图 10-11 用 ipconfig 命令 查看 TCP/IP 设置 
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可 以 看 到 ,这 人 台 客 户 机 的 本 地 连接 网 卡 的 IP 地 址 为 192. 168. 0. 3 , 子 网 掩 码 为 255 
55. 255. 0, 默 认 网 关 为 192. 168. 0. 1。 读 者 可 以 ping 默认 网 关 地 址 来 确定 是 否 本 地 网 络 


如 果 网 关 不 通 , 还 可 以 进一步 ping 同一 个 子 网 中 其 他 同学 的 客户 机 地 址 ,如 果 ping 
通 了 ,说 明 网 关 有 问题 或 者 网 关 地 址 没 设 对 ,如 果 还 不 通 , 就 得 好 好 查 一 下 自己 的 机 器 设 
置 或 者 网 卡 是 否 有 问题 了 。 

以 下 是 ping 命令 的 一 个 变化 (如 图 10-12 所 示 ) ,可 以 增加 测试 的 次 数 ,统计 成 功 的 
百分比 。 


志 命令 提示 符 本 


Settings\hdministrator?>ping -n 198 « 


[211-144- 49] with 


图 10-12 ping 命令 的 一 个 变化 


(2) 验证 Web 服务 可 以 访问 

验证 Web 服务 的 最 简单 的 方法 就 是 通过 浏览 器 去 访问 ,这 就 不 必 多 讲 了 。 而 当 
Web 站 点 不 可 访问 时 ,可 从 以 下 角度 去 诊断 : 

。 网 络 通 不 通 ? 

。 站 点 有 没有 启动 ? 

。 默认 页 面 有 没有 定义 ? 

(3) 验证 FTP 服务 可 以 访问 。 

a 读者 同样 可 以 用 浏览 器 来 验证 FTP 服务。 访问 FTP 的 URL 格式 以 ftp: // 开 
始 ,后续 的 格式 与 访问 Web 站 点 的 格式 一 样 。 例 如 ， So IP 地 址 为 10. 10. 1.2 的 
FTP 站 点 ,读者 可 以 在 浏览 器 地 址 栏 里 输入 ftp: //10. 10. 1.2。 按 回 车 键 后 ,如 果 FTP 
站 点 不 允许 匿名 访问 ,将 弹出 如 图 10-13 所 示 的 对 话 杠 要求 输入 用 户 名 和 密码 。 

G@) 账户 验证 正确 后 ,可 进入 FTP 服务 ,可 以 像 使 用 Windows 文件 夹 一 样 在 客户 机 
和 FTP 站 点 之 间 拖 拉 交 换文 件 ,来 上 传 或 下 载 .如 图 10-14 所 示 。 读 者 可 以 试 一 试 上 传 
下 载 是 否 成 功 , 以 确保 Dreamweaver 可 以 正确 的 在 客户 机 和 服务 器 之 间 同 步 Web 应 用 
页 面 。 


5) 娃 


EE 面向 Web 应 用 的 Dreamweaver 站 点 


实验 0 建立 web 应 用 开发 及 运行 环境 的 实验 121 


口 
文件 于 ) ”编辑 区 ) 查看 QW ” 收 蔬 个 ) 工具 这) 帮助 0 3 


四 是- ©- | 记 过 辽 xHx | 遍 入 X 只 | 国 : 


天 证 夯 | 园 ftp://10. lo 12/ 图 贺 #3 链接 ”| 


2 服务 器 不 区 许 匿名 登录 ， 或 者 不 接受 该 电子 邮件 地 址 。 
FIP 服务 器 ; 10.10.1.2 


用 户 名 QD: 1 国 
密码 中) : 
登录 后 ， 可 以 格 这 个 服务 器 秒 加 到 | 您 的 收藏 严 ， 以 便 轻 易 返 回 - 
不 加 密 或 编码 密码 或 数据 。 
全 于 贡生 由 人 


Learn more about using Web Folders. 
口 匿名 登录 和) 口 保存 密码 @) 


正在 这 按 到 10 CC 于 jj 
图 10-13 使 用 浏览 器 访问 FTP 服务 


By ftp://10. 10.1.2/ Nicrosoft Internet Explorer 
文件 E) 编辑 时) 查看 收藏 人 工具 CD) 帮助 00) 


Oa- © - 旋 | 忆 是 re | pp 


地 扯 凶 | 护 ] ftp://10. 10.1.2/ 


mmServe... Connections 


复制 型 文件 夹 于) 


前 切 代 ) 
复制 C) 
粘贴 到 ) 


山 除 @) 
重合 名 虽 


属性 8) 


用 户 : administrator Internet 


图 10-14 使 用 FTP 服务 


(1) 在 客户 机 的 Dreamweaver 中 新 建 一 个 名 为 My site 的 站 点 ,对 应 服务 器 上 的 
“My site”Web 站 点 ,并 通过 FTP 方式 来 上 传 、 下 载 和 同步 “My site”Web 站 点 的 文件 。 
除 此 之 外 ,要 求 新 站 点 支持 ASP VBScript 技术 ,并 且 这 个 站 点 支持 多 人 的 团队 协同 
天 发。 

完成 本 题 的 操作 步骤 如 下 。 


@ 在 客户 机 的 Dreamweaver 的 浮动 面板 中 , 单 击 【文件 了 展开 按钮 来 打开 【文件 】 了 
面板 。 


@ 在 【站 点 了 选项 卡 中 :选择 【站 点 了 (新 建站 点 了 命令 ,在 【站 点 定义 为 了 对话 框 中 选择 
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【基本 了 选项 卡 ,来 打开 站 点 定义 向 导 。 

@ 在 【站 点 名 称 了 文本 框 中 输入 站 点 的 名 字 My site, 然 后 单 击 【 下 一 步 ] 按 钮 继续 。 

@ 选择 【是 ,我 想 使 用 服务 器 技术 选项 ,在 【 哪 种 服务 器 技术 ?下拉 列 表 框 中 选择 
【ASP VBScript 技术 选项 .然后 单 击 [ 下 一 步 了 按钮 继续 。 

@ 选择 【在 本 地 进行 编辑 ,然后 上 传 到 远程 测试 服务 器 了 单 选 按钮 ,并 且 选 择 本 地 编 
辑 时 ,文件 存储 的 位 置 , 可 以 存在 客户 机 上 的 “我 的 文档 ”文件 夹 下 的 My site 文件 夹 , 然 
后 单 击 【 下 一 步 3 按 钮 继续 。 

@ 选用 FTP 的 方式 来 连接 到 测试 服务 器 ,在 第 二 个 【您 的 测试 服务 器 的 主机 名 或 
FTP 地 址 是 什么 ?] 文 本 框 中 输入 服务 器 的 IP 地 址 。 

在 第 三 个 【您 打算 将 您 的 文件 存储 在 测试 服务 器 上 的 什么 文件 夹 中 ?] 文 本 框 中 不 输 
入 内 容 ; 在 下 面 的 两 个 文本 框 中 ,分 别 输入 FTP 用 户 名 和 密码 ,选择 【保存 3 选项 。 

单 击 【测试 连接 3 按钮 ,如 果 正 常 再 进行 后 续 配 置 .如 图 10-15 所 示 。 


= 


副 试 文件 


您 如 何 连接 到 | 出 试 服务 器 3 (C) 
Ti 


ETP 


您 的 测试 服务 器 的 主机 名 或 FTP 地 址 是 什么 了 


您 打算 将 您 的 文件 存储 在 负 试 服务 器 上 的 什么 文件 夹 中 ? E) 


您 的 FTF 用 户 名 是 什么 了 人) 


您 的 FTP 密码 EE) 


口 保存 中 


KE-S®) Fs 
图 10-15 ”站 点 定义 对 话 框 


@ 单 击 【5 下 一 步 ] 按 钮 ,输入 测试 用 的 URL ,应 该 是 “My site”Web 站 点 的 URL, 即 
http: //10.10.1.4/, 单 击 测试 按钮 , 按 教材 上 所 
说 的 原则 判断 URL 是 否 正 确 。 

单 击 【 下 一 步 ] 按 钮 ,选择 “ 否 , 不 启用 存 回 
和 取 ! 多 

@ 单 击 [下 一 步 ] 按 钮 ,检查 总 结 信息 后 , 单 击 | 吕 Clv unl 
【完成 了 按钮 确认 ,并 结束 新 站 点 定义 。 

四 这 时 :在 【站 点 了 面板 中 可 以 看 到 刚刚 定义 
好 的 My site 站 点 ,如 图 10-16 所 示 。 
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(2) 新 建 一 个 页 面 , 保 存在 My site 本 地 文件 夹 下 ,同步 站 点 后 ,看 一 看 服务 器 的 “My 
site”Web 站 点 的 主 文件 夹 下 有 什么 变化 。 在 Dreamweaver 中 从 My site 站 点 删除 此 文 
件 ,然后 同步 站 点 ,再 看 一 看 服务 器 的 主 文件 夹 的 变化 。 

完成 本 题 的 操作 步骤 如 下 。 

OO 在 本 地 客户 机 的 Dreamweaver 中 .选择 主 菜单 中 的 [文件 3IK 新 建 3 命 令 。 

@ 在 新 建文 件 对 话 框 中 ,左边 的 类 别 栏 中 选择 动态 页 ,然后 右边 的 动态 页 栏 中 选择 
【ASP VBScript】 选 项 , 单 击 【创建 3 按钮 建立 新 页 面 。 

@) 选择 主 菜单 中 的 [文件 3I〖 保 存 ] 命 令 ,以 try. asp 为 文件 名 保存 文件 。 

@ 保存 文件 后 ,在 【文件 浮动 面板 中 的 【站 点 3 选项 卡 中 ,可 以 看 到 My site 站 点 下 出 
现 了 try. asp ,再 看 一 看 服务 器 上 有 什么 变化 没有 ? 

@ 在 【文件 浮动 面板 中 的 【站 点 3 选项 卡 中 ,选择 【站 点 了 代 同 步 ] 命 令 。 

@ 同步 操作 的 对 话 框 如 图 10-17 所 示 ， 
选择 【同步 3 下 拉 菜 单 中 的 “整个 "My Site ' 站 


同步 @);: 
点 ”, 单 击 【 预 览 ] 按 钮 继续 。 方向 四 ; [Re ] 
@ try. asp 出 现在 待 上 传 文件 清单 中 , 单 口 删 除 本 地 驱动 器 上 没有 的 远 端 六 件 
击 【 确 定 ] 按 钮 开始 同步 站 点 。 


@@ 同步 结束 后 在 服务 器 上 ,选择 [开始 】 图 10-17 【同步 文件 3 对 话 框 
【程序 3I【 管 理工 具 】IKInternet 服务 管理 器 了 
命令 ,打开 【Internet 信息 服务 了 窗口 ,看 一 看 服务 器 上 有 什么 变化 。 

人 在 【文件 浮动 面板 中 的 【站 点 选项 卡 中 ,My site 站 点 的 本 地 视图 中 删除 try. 
asp, 再 同步 一 次 整个 站 点 ,注意 预览 清单 中 动作 的 变化 ,同步 后 注意 服务 器 上 “My site” 
Web 站 点 主 文件 夹 内 容 的 变化 。 

(3) 建立 My site 站 点 (Dreamweaver 站 点 ) 内 所 有 动态 页 面 共 享 的 数据 库 连 接 , 取 名 
为 CourseSys, 使 用 服务 器 上 的 同名 的 ODBC 系统 DSN 设置 。 

完成 本 题 的 操作 步骤 如 下 。 

Q@ 新 建 一 个 支持 ASP VBScript 的 动态 页 ;在 Dreamweaver 的 【应 用 程序 3 浮动 面板 
中 , 单 击 【数据 库 3 选 项 卡 来 选择 数据 库 。 

@ 在 【数据 库 3 选 项 卡 中 , 单 击 天 | 按钮 .选择 [数据 源 名 称 C(DSN)】。 

@) 这 时 会 弹出 如 图 10-18 所 示 的 对 话 框 .在 【连接 名 称 ] 文 本 框 中 输入 给 该 连接 取 的 
名 字 , 例 如 CourseSys。 

数据 源 名 称 (DSH) 


连接 名 称 : |CourseSvs 
数据 源 名 称 Ds) : 
用 户 名 : 

密码 : 


Dreamweaver 应 连接 : @ 使 用 测试 服务 器 上 的 DSN 
〇 使 用 本 地 


图 10-18 【数据 源 名 称 (DSN)】 对 话 框 
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@ 在 KDreamweaver 应 连接 了 中 .选择 【使 用 测试 服务 器 上 的 DSN 了 3 单 选 按钮 。 

@) 单 击 CDSNJ 按 钮 , Dreamweaver 读 取 服务 器 中 的 系统 DSN 列表 ,完成 后 会 弹出 如 
图 10-19 所 示 的 对 话 框 。 

@ 选择 CourseSys , 单 击 【确定 了 按钮 .如 图 10-20 所 示 .CourseSys 出 现在 【数据 源 名 
称 】 文 本 框 中 。 


选取 ODBC D5N 


数据 源 名 称 《DSN) 


选 职 0DBC_DSN: 
[ou eS | 


MIQIS 
PurchaseSys 


连接 名 称 : Cours 
数据 源 名 称 sD ; 


用 户 名 : 


密码 : 
Dreamweaver 应 连接 : @ 使 用 测试 服务 器 上 的 DSN 
加 使 用 本 地 DSN 


图 10-19 【选取 ODBC DSN】 对 话 框 图 10-20 【数据 源 名 称 (DSN)】 对 话 框 


@ 由 于 SQL Server 2000 的 数据 库 要 求 用 户 名 和 密码 才能 访问 ,那么 在 【用 户 名 了】 文 
本 框 中 输入 sa, 在 【密码 了 文本 框 中 不 输 ( 如 果 读 者 
自己 改过 了 SQL Server 2000 的 sa 管理 员 用 户 的 
密码 ,那么 就 输入 相应 的 密码 ) 。 

@ 单 击 【 测 试 3 按 钮 测试 DSN 设置 是 否 正 确 ， 
在 见 到 “成 功 创建 连接 脚本 ”的 信息 后 可 确保 无 
误 , 单 击 【 确 定 3 按 钮 完成 数据 库 连 接 定义 。 

@@ 此 时 将 看 到 【数据 库 3 选 项 卡 中 会 多 了 一 个 
代表 数据 库 连 接 的 CourseSys 图 标 . 单 击 前 面 的 
加 号 可 以 打开 连接 树 , 在 树 中 可 以 看 到 数据 库 的 
组 成 结构 ,如 图 10-21 所 示 。 

@ 选择 并 右 击 某 个 数据 表 , 例 如 Student ,在 
弹出 的 菜单 中 选择 【查看 数据 了 命令 ,可 以 看 到 如 图 10-22 所 示 的 对 话 框 ,在 这 个 对 话 框 中 
可 以 浏览 该 表 的 所 有 记录 。 

CourseSys 数据 库 的 建立 已 经 完成 ,所 有 在 My site 站 点 下 新 建 的 动态 页 面 ,都 可 以 
使 用 这 个 连接 。 

同步 一 下 整个 My site 站 点 ,看 有 什么 变化 发 生 。 

(4) 选 作 题 操作 略 。 


4. 实验 后 的 思考 题 


(1) 实验 2) 中 建立 的 新 站 点 会 不 会 和 默认 Web 站 点 冲突 ? 

(2) 一 台 服 务 器 中 最 多 可 以 建立 多 少 个 Web 站 点 ,这 个 特性 主要 受 哪些 因素 的 
影响 ? 

(3) Web 站 点 的 权限 如 何 控制 ? 


日 加 ”coursesys 
日 - 翅 表 

日 - 国 dbo. Account 

Ry Username (Char 10 Required) 

Ry Password (Char 10 Required) 
Ry AuthLeval (Char 10 Required) 
Re VUserHo (Char 10 Required) 
dbo. dtproperties 


图 10-21 【数据 库 ] 面 板 示 意图 
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| Studentno Department 
0161350 人 人- i 
3124018 计算 机 科学 系 


前 25 个 EB) ] 下 2s 个 a ] 


图 10-22 【查看 数据 窗口 示意 图 


(4) FTP 站 点 的 权限 如 何 控制 ? 

(5) 如 何 找到 IIS 5.0 的 文档 ? 

(6) 阅读 IIS 5.0 的 文档 , 想 一 想 什 么 是 虚拟 目录 ? 它 有 什么 好 处 ? 

(7) Web 服务 器 必须 和 数据 库 服务 器 安装 在 同一 台 机 器 上 吗 ? 

(8) 如 果 Web 服务 器 和 数据 库 服 务 器 分 开 装 在 两 台 不 同 的 服务 器 上 ,那么 配置 上 会 
有 什么 变化 ?在 哪 台 服务 器 上 定义 ODBC DSN? 哪 台 服务 器 是 Dreamweaver 站 点 管理 
模式 中 的 远程 测试 服务 器 ? 

(9) 编辑 Dreamweaver 站 点 中 已 经 存在 的 文件 应 该 怎么 操作 ? 

(10) 如 何在 Dreamweaver 站 点 中 仅仅 同步 单个 更 新 过 的 文件 ? 
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11 Web 应 用 程序 概述 实验 
实验 


1. 实验 的 目的 与 要 求 


(1) 熟悉 Web 应 用 程序 的 基本 概念 。 
(2) 熟悉 ASP 应 用 服务 器 技术 。 

(3) 掌握 基本 的 SQL 语句 。 

(4) 熟悉 IIS Web 服务 器 。 


2. 实验 的 操作 内 容 


1) 熟悉 Web 应 用 程序 的 基本 概念 
(1) 查看 有 关 旅 游 网 站 Web 应 用 程序 实例 的 信息 : 
http: //tttrip. online. sh. cn/news. asp 
(2) 在 网 上 查找 ,哪些 网 站 上 提供 了 Web 应 用 程序 ? 
2) VBScript 脚本 语言 的 实验 
3X 一 5， X 宇 50 
2X 十 6， X=50 
(2) 利用 输入 函数 InputBox( ) 输 入 两 个 数字 ,转换 成 整数 。 比 较 这 两 个 整数 的 大 
小 ,并 用 输出 函数 MsgBox 输出 比较 大 的 结果 ,车 两 个 数 相 等 输出 “二 数 相 等 ”。 
(3) 利用 日 期 和 时 间 函 数 测试 今天 的 日 期 和 当前 的 时 间 , 并 计算 出 今天 到 2008 年 底 
共有 和 多少 天 ? 显示 测试 结果 。 
用 子 程序 、 双 重 循 环 、 单 重 循环 等 不 同 的 方法 编写 下 列 算式 的 代码 。 
(4) 求 s 王 1 十 4 十 7 十 10 十 … 十 100 
(5) 求 s==1 十 (1 十 3) 十 (1 十 3 十 5) 十 … 十 (1 十 3 十 5 十 … 十 19) 
(6) 求 s==1 十 1/(1 十 2) 十 1/(1 十 2 十 3) 十 … 十 1/ (1 十 2 十 3 十 … 十 19) 
(7) 求 s 1!1 十 31 一 51 十 71 一 91 十 … 十 191 
(8) 求 s==1!1 十 (11 十 31) 十 (11 十 31 十 51) 十 -… 十 (11 十 31 十 51 十 … 十 191) 
3) ASP 应 用 服务 器 技术 的 实验 
(1) 平时 访问 过 的 网 站 , 哪 一 个 是 使 用 了 ASP 技术 的 ?把 它 找 出 来 。 
(2) 制作 一 个 用 于 输入 信息 的 含有 表单 的 网 页 input. asp, 网 页 中 元 素 和 布局 如 
图 11- 1 所 示 。 制 作 一 个 用 Request 的 Form 方法 获取 并 显示 信息 的 网 页 show. asp, 网 


(1) 用 随机 函数 产生 一 个 0 到 100 之 间 的 数 X. 并 求 分 段 函 数 | 


页 显示 结果 如 图 11-2 所 示 。 当 在 index. asp 中 输入 完 信息 后 , 单 击 【 确 定 了 按钮 ,表单 中 的 
输入 的 信息 在 show. asp 的 网 页 中 被 获取 并 显示 。 


区 Request 的 Fora 获 取 方 法 实例 - 了 icrosoft Internet Explorer 回 
i 文件 四 编辑 下 查看 W) 收藏 和 工 . ”| 江 民 永 雪 喇 雪 ”人 寺 语 ”加 囊 大 
= 地 址 部 ) | 者 http://192. 168. 100. 113/input. asp 辣 园 # 到 


请 填写 您 的 个 人 信息 


本名: [Es 密码 。 [ove] 
性 别 : 加 男 OO 女 爱好 : 回 音乐 回 旅游 回 上 网 


恋恋 您 对 读书 的 看 法 : 


“藏书 不 难 ， 能 看 为 难 ， 看 书 不 难 ， 能 读 为 难 ， 读 书 不 难 ， 能 用 为 难 ， 能 用 不 倒 
难 ， 能 记 为 难 。”| 


图 11-1 用 户 输 入 信息 的 网 页 


马 Request 的 Fora 获 取 方 法 实例 - Microsoft In--- [Cc | 加 | 区 | 


| 文件) 和 ”| 江 R 吉 s 杀 志 SY (Dw 导 


地址 四 ) 加 http://192. 168. 100. 113/show. asp 国 | [SEa 


下 面 显 示 的 是 您 的 个 人 信息 


爱好 音乐， 旅游 ， 
看 法 ， “藏书 不 难 ， 起 四 为 难 ， 看 书 不 难 ， 能 读 为 难 ， 
读书 不 难 ， 能 用 为 难 ， 能 用 不 难 ， 能 记 为 难 。 


图 11-2 用 Request 的 Form 方法 获取 并 显示 信息 的 网 页 


(3) 用 Request 的 QueryString 获取 方法 完成 从 一 个 网 页 向 另 一 个 网 页 传递 数据 的 
实验 。 

传递 的 数据 为 : Name 一 卓 群 \Sex 一 男 、.Lovel 一 音乐 .Love2 一 旅游 .Love3 王 上 网 。 
在 inputl. htm 中 建立 如 图 11-3 所 示 的 超级 链接 “传递 数据 ”*”。 当 单 击 超 级 链接 “传递 数 
据 ” 后 ,在 showl. asp 中 显示 如 图 11-4 所 示 的 传递 数据 。 

(4) 对 用 Request 的 Form 方法 获取 信息 的 网 页 show. asp 加 以 修改 ,使 其 能 完成 下 
述 功能 。 

。 用 Session 对 象 存储 从 input. asp 的 表单 中 获取 的 “姓名 ”“ 爱 好 ”和 “读书 的 看 法 ” 

三 种 信息 ; 
。 对 网 页 的 标题 文字 “以 下 显示 的 是 您 的 个 人 信息 ”建立 超级 链接 ,被 链接 的 网 页 是 
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E] Seeersgxanezamz 应 用 部 - Nicrosoft Interne--- [- |[ 吕 |(X| 
| 文件 中 加 加 EE ”| 江 R# 志 5 哇 z# 志 。 人 二 Om 
; 地址) | 者 http: //192. 168. 100. 113/input1. asp [> Ea 


图 11-3 用 Request 的 QueryString 传递 数据 的 网 页 


加 QueryString 应 用 实例 -~ Hicrosoft Internet Ex--- 于 | 癌 | 区 | 


i 文件 ED 编辑 芭 ”= 江 民 杀毒 eA 志 。 入 去 志 (Dw 雇 


地址 印 ) | 独 ) http: //192. 168. 100. 113/showl. asp?Name=XD7xBFXCSxB) 国 | 转 到 


您 好 ! 
人 和 果 旅游 , 上 网 


图 11-4 用 Request 的 QueryString 获取 数据 的 网 页 


Show2. asp; 
。 在 如 图 11-5 所 示 的 网 页 Show2. asp 中 显示 用 Session 对 象 存储 的 这 三 种 信息 。 


当 无 标题 文档 - Wicrosoft Internet Explorer 辐 回 因 | 
i 文件 四 编辑) 查看 WW) 收藏 W) ”| 江 R 表 呈 pi 雪 寺 二 ”加 大 
地 址 加) | 箱 http: //192. 168. 100. 113/show2. asp 周 | 园 昔 到 


zzq 您 好 | 欢迎 您 光临 网 上 书店 
zzq 您 好 1 欢迎 您 光临 网 上 书店 。 您 的 爱好 是 ， 音 乐 


旅游 ， 上 网 
zzq 您 好 | 欢迎 您 光临 网 上 书店 。 您 对 污 节 靖 看 基 是 ， “藏书 不 难 ， 能 看 为 
难 ， 看 书 不 难 ， 能 读 为 难 ， 读 书 不 难 ， 能 用 为 难 ， 能 用 不 难 ， 能 记 为 难 。 ” 


图 11-5 显示 用 Session 对 象 存储 的 信息 


(5) 用 Application 对 象 制作 一 个 简单 的 聊天 室 , 如 图 11-6 所 示 , 使 其 满足 以 下 
要 求 。 
。 若 有 发 言 . 先 锁定 Application, 将 从 表单 中 获取 的 信息 加 到 Application 中 ,然后 
解除 锁定 的 Application, 最 后 显示 发 言 的 内 容 。 
。 以 talk. asp 为 名 保存 文件 。 
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沁 Application 应 用 实例 - 了 icrosoft Internet Explorer 
3 文件 @) 编辑 EE) 查看 WW) 收 若 &) 工具 CD) 才 助 0D = ll 
| Oa- ©- 国 @ irs Ss Ss Dm | 
a 国 | 另 雪 索 - 少 交 出 8 示 | 表达 项 | 

地 址 中) | 者 http://192. 168. 100. 113/talk asp 国 


网 上 书店 聊天 室 


请 您 恋恋 对 读书 的 看 法 : 


皆 以 阅历 之 深浅 ， 为 所 得 之 浅 深 耳 。| 


少年 读书 ， 加 障 间 望月 。 
中 年 读书 ， 如 庭 中 望月 。 
老年 读书 ， 如 台 上 玩 月 。 


| 和 


图 11-6 用 Application 对 象 制作 的 聊天 室 


3. 实验 的 参考 步骤 


1) 熟悉 Web 应 用 程序 的 基本 概念 

(1) 用 Internet Explorer 或 其 他 浏览 器 浏览 旅游 网 站 的 URL。 它 实现 了 一 个 Web 
应 用 的 哪些 功能 ? 缺少 了 哪些 功能 ? 

(2) 读者 平时 上 网 一 定 接触 过 不 少 网 站 ,也 正在 使 用 某 些 网 站 。 试 着 回忆 , 带 着 问题 
再 去 使 用 。Web 应 用 程序 还 有 哪些 ? 在 线 计算 个 人 所 得 税 算 不 算 Web 应 用 ? 网 上 图 书 
馆 算 不 算 Web 应 用 ? 

本 书 为 读者 提供 一 个 站 点 做 参考 。 上 海 图 书馆 : http: //www. library. sh. cn/ 

2) VBScript 脚本 语言 的 实验 

(1) 求 分 段 函 数 的 程序 代码 如 下 : 


二 第 
Dim x,y 
x= Int(Rnd() x 100) 
if x> = 50 then 


入 三 人 状 乱 = 性 

Response. Write " 当 X="&CStr(x)&" 时 .函数 值 Y= "gCstr(y) 
else 

y=2xx+6 

Response. Write " 当 X= "gCStr(x)&g" 时 ,函数 值 Y= "gCSstr(y) 
End if 
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名 


(2) 利用 输入 函数 InputBox() 输 入 两 个 数字 ,转换 成 整数 。 比 较 这 两 个 整数 的 大 小 ， 
并 用 输出 函数 MsgBox 输出 比较 大 的 结果 , 若 两 个 数 相等 输出 “二 数 相等 "。 在 二 body 二 
与 二 /body 二 之 间 插 和 人 人 下列 代码 : 


一 body 一 
< 一 Script Language = "VBScript"> 
< 一 ! 一 
Dim xl ,x2 
xl = CInt(InputBox(" 参 加 运算 的 第 1 个 数字 :"," 输 入 数字 ")) 
x2 = CInt(InputBox(" 参 加 运算 的 第 2 个 数字 :"," 输 入 数字 ")) 
if xl = x2 then 
MsgBox xl&" 和 "&x2&" 二 数 相 等 " 
else 
if xl 一 x2 then 
MsgBox xl&" 比 "S&x2&" 大 " 
else 
MsgBox x1g&" 比 "&x2&" 小 " 
end if 
end if 
=/sScript> 
=/body> 


(3) 利用 日 期 和 时 间 函 数 测试 今天 的 日 期 和 当前 的 时 间 , 并 计算 出 今天 到 2008 年 年 
底 共 有 多 少 天 。 显 示 测 试 结 果 。 在 一 body 二 与 二 /body 二 之 间 搬 和 下列 代码 : 


一 body 二 
一 外 
Dim d(3) 
d(0) = "当前 的 时 间 : "gtime() 
d(1) = "今天 的 日 期 : "gDate() 
d(2) = "今天 星期 几 : "SWeekDay(date) 
d(3) = "到 2008 年 底 还 有 几 天 ? "gDateDiff("d" .Date().,"12/31/2008") 
Response. write d(0) 
二 二 br 二 “< 一 br 一 为 回 车 
一 $% = d(1) % 二 一 br 二 "以 下 3 名 为 显示 数组 d(i) 的 内 容 
=% =d(2)%><br> 
=%=d(3)%>><br> 
=/body> 


用 子 程序 、 双 重 循环 、 单 重 循环 等 不 同 的 方法 编写 下 列 算式 的 代码 。 
(4) 求 s= 二 1 十 4 十 7 十 10 十 … 十 100 的 程序 代码 为 : 


< 一 body bgcolor = "#99FFCC"> 
一 多 
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s=0 
for i=1 to 100 step 3 
s=5s+1i 
next 
response.write "s= "&s 
第 一 


一 /body 一 
(5) 求 s==1 十 (1 十 3) 十 (1 十 3 十 5) 十 … 十 (1 十 3 十 5 十 … 十 19) 的 程序 代码 为 ， 


一 body bgcolor = "#99FFCC"> 
< 一季 
s=0 
for i=1 to 19 step 2 
sl=0 "sl 存放 算式 括号 中 的 部 分 和 
for j=1 toi 
sl=sl+j 
next 
s=s+sl 
next 
response. write "s= "&s 
多 二 
=/body>> 


(6) 求 s==1 十 1/(1 十 2) 十 1/(1 十 2 十 3) 十 … 十 1/ (1 十 2 十 3 十 … 十 19) 的 程序 代码 为 ， 


< 一 body bgcolor = "#99FFCC"> 


~s% 
s=0 
世 溉 兴 
for i=1 to 19 
三 让 半生 ' 每 次 循环 求 出 的 t 值 是 每 一 项 的 分 母 
s=st+1/t 
next 
response.write "s= "&s 
第 
二 /body 一 
(7) 求 s 1! 十 3! 一 5! 十 7! 一 9! 十 … 十 191 的 程序 代码 为 : 
解法 1 
~% 
s=0 
Form=1 to 19 step 2 
志 二 于 
L= 1 


For n=1 tonm 
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t=tx*n ' 每 次 循环 求 出 的 t 值 是 每 一 项 的 阶乘 
next 
L= —L ' 每 次 循环 求 出 的 工 值 是 相反 数 
s=s+tx*L 

next 


response.write "s= "&s 


二 
解法 2 
=s% 
s=0 
t=1 
L=1 
Form=1 to 19 step 2 
t=tx*m "每 次 循环 求 出 的 上 + 值 是 每 一 项 的 阶乘 
L=-L ' 每 次 循环 求 出 的 工 值 是 相反 数 
S=S+ 七 # 工 
七 = 七 关 (十 1) 
next 
response. write "s = "&s 
种 一 


《9 求 .8 二 1 十 《11 二 331》 二 {14 二 如 二 584) 二 se 二 《了 二 31 二 珊 十 -6 古 191》 的 程 
序 代码 为 : 


~ % 
s=0 ' 存 放 总 的 累加 和 
sl=0 ' 存 放 每 一 项 括号 中 的 部 分 和 
t=1 ' 存 放 阶 乘 的 结果 
Form=1 to 19 step 2 
t=txm ' 每 次 循环 求 出 的 t 值 是 阶乘 的 值 
sl=slt+t ' 每 次 循环 求 出 部 分 和 
t=tx*x (m+1) 
s=s+sl 
next 
response.write "s = "&s 
名 > 


3) ASP 应 用 服务 器 技术 的 实验 

(1) 提供 一 个 站 点 做 参考 。 清 华 大 学 出 版 社 : http: //www. tup. tsinghua. edu. cn/。 
在 首页 的 书目 搜索 界面 中 选择 “ 按 书 名 ”, 书 名 填 “ 网 页 制作 教程 ”, 然 后 单 击 “ 搜 索 ” 按 钮 ， 
可 以 搜索 到 书 名 中 包含 “网 页 制作 教程 ?字样 的 书目 。 

注意 : 

浏览 器 的 地 址 栏 的 URL 变 成 为 http: //www. tup. tsinghua. edu. cn/jiansuo/ 
jiansuo. asp? select2= bname®&.search222 = %CD%F8% D2% B3% D6% C6%D7HF7% 
BD%CC%B3%CC。 这 是 一 个 采用 ASP 技术 的 很 好 的 实例 。 首 页 中 的 书目 搜索 用 的 下 
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拉 菜 单 和 输入 书 名 用 的 文本 框 , 以 及 搜索 按钮 都 是 这 个 应 用 的 表单 的 一 部 分 ,在 提交 表单 
后 ,从 URL 可 以 看 出 ,这 个 表单 的 提交 采用 GET 方式 ,即将 表单 元 素 的 提交 值 作为 
URL 的 一 部 分 。 

请 看 一 看 上 面 的 URL .能 说 出 制作 该 表单 时 给 下 拉 菜 单 取 的 名 字 是 什么 吗 ? 给 文本 
框 取 的 名 字 是 什么 呢 ? 

注意 : 

在 URL 中 汉字 “网 页 制作 教程 ”将 会 被 编码 成 WCD%F8%D2%B3%D6%C6%D7% 
F7%BD%CC%B3%CC。 

请 再 想 一 想 ,在 接收 表单 元 素 值 的 页 面 ,该 用 哪个 ASP 对 象 的 哪个 方法 来 得 到 表单 
元 素 值 呢 ? 答案 是 Request 对 象 的 QueryString 方法 。 

(2) 制作 一 个 如 图 11-1 所 示 用 于 输入 信息 的 含有 表单 的 网 页 input. asp。 

制作 一 个 如 图 11-2 所 示 用 Request 的 Form 方法 获取 并 显示 信息 的 网 页 show. asp。 

完成 本 题 的 操作 步骤 如 下 。 

OO 选择 主 菜单 中 的 [文件 3I〖 新 建 3 命 令 ,在 弹出 【新 建文 档 ] 对 话 框 中 选择 【常规 ] 选 
项 卡 。 在 【类 别 了 框 中 选择 【动态 页 .在 右边 出 现 的 【动态 页 了 类 型 选项 中 ,选择 【ASP 
VBScript】, 单 击 【〖 创 建 3 按 钮 ,这 样 就 会 创建 一 个 新 的 支持 采用 VBScript 语言 的 ASP 技 
术 的 无 标题 文档 。 

名 按 图 11-1 的 布局 建立 网 页 ,表单 域 的 属性 和 说 明 如 表 11-1 所 示 。 

表 11-1 表单 域 属性 和 说 明 


元 素 类 型 属 性 值 说 明 
表单 名 字 : frmInpnut 本 表单 
y 名 字 : txtUsername _ 
文本 域 类 型 , 单行 输入 姓名 的 文本 框 
ee 名 字 : txtPassword i i 
文本 域 类 型 , 密码 接受 密码 输入 的 文本 框 
名 字 : txtIdea 
文本 域 类 型 : 多 行 输入 对 读书 的 看 法 
字符 宽度 : 70 
i 名 字 : radSex 本 
单 选 按钮 类 型 单 选 按钮 选择 性 别 
eR、 名 字 : chkLove " 
复 选 框 类 型 : 复 选 框 选择 爱好 
名 字 : btnInput 
按钮 标签 : 确认 确认 输入 信息 的 按钮 
动作 : 提交 表单 
名 字 : btnClear 
按钮 标签 : 重 填 清除 表单 的 信息 
动作 : 重 置 
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@) 选中 表单 ,在 表单 的 [属性 了 面板 中 设置 表单 的 属性 ,如 图 11-7 所 示 。 


ET 表单 名 称 动作 Fa al | 已 目标 [lork ” 国 ”类 @ | 元 国 @ 
到 国 


[ErmInput 方法 |FosT 国 WINE 类 型 


图 11-7 表单 的 属性 面板 


。 在 【表单 名 称 】 文 本 框 中 ,输入 表单 名 frmInput; 

。 在 【动作 文本 框 中 ,输入 用 Request 的 Form 方法 获取 信息 的 网 页 show. asp; 

。 在 【方法 ] 文 本 框 中 ,输入 POST; 

。 在 【目标 3 下 拉 列 表 框 中 ,选择 _blank 选项 ,表示 在 新 的 窗口 中 显示 网 页 

show. asp。 

@ 保存 网 页 input. asp。 

@@ 新 建 动态 网 页 show. asp, 设 置 页 面 背 景 颜色 为 #99FFCC。 

@ 在 网 页 上 居中 输入 标题 文字 “下 面 显示 的 是 您 的 个 人 信息 ”, 并 设置 : 字体 为 楷 
体 , 大 小 为 5 号 ,颜色 为 #993300。 

@ 单 击 工具 栏 中 【显示 代码 视图 了 按钮 & ,程序 代码 如 下 所 示 , 在 二 body> 二 与 
过 /body 二 之 间 加 入 如 下 所 示 的 粗 斜 体 的 代码 : 


=html> 
二 head 一 
< 一 meta http-equiv = "Content-Type" content = "text/html; charset = gb2312" 二 
一 title 二 Request 的 Form 获取 方法 实例 二 /title 二 
=/head> 
< 一 body bgcolor = "#99FFCC"> 
一 div align= "center"> 
一 p 二 一 strong 二 一 font color = " 间 993300"” size = "5" face = "楷体 _GB2312" 二 下 面 显 示 的 是 
您 的 个 人 信息 二 /font 二 一 /strong 盖 一 /p 二 
一 p 二 S&nbsp; 一 /p 二 
=p> 
' 以 下 粗 斜体 字母 为 添加 的 代码 
一 多 
dim User_ Name . Password . Sex .Love , Idea 
User_Name = Request. Form(" txtUserName" ) 
Password = Request. Form(" txtPassWord" ) 
Sex = Request. Form(" radSex" ) 
Love = Request. Form(" chkLove") 
Idea = Request. Form(" txtIdea") 
务 一 
=</p> 
二 p align =" left" 二 姓名 : 一 各 = User_Names 二 一 br 一 
密码 : 二 名 = Passwordsgs 二 一 br 二 
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性 别 : 二 = Sexgs 二 一 br 一 
爱好 : 一 名 = Iovegs 二 一 br 二 
看 法 : 一 名 = Ideas 二 一 br 二 
=/p> 
=/div > 
=/body> 
=/html>> 


@@ 保存 网 页 show. asp， 并 在 上 传 测试 服务 器 后 浏览 网 页 。 

(3) 按 题 意 用 Request 的 QueryString 获取 方法 建立 从 网 页 inputl. htm 向 另 一 个 网 
页 showl. asp 传递 数据 的 实验 。 传 递 的 数据 为 Name 一 卓 群 、Sex 一 男 、.Lovel 王 音乐、 
Love2 王 旅游 .Love3 王 上 网 。 在 inputl. htm 中 建立 超级 链接 “传递 数据 ”。 当 单 击 超级 
链接 “传递 数据 ”后 ,在 showl. asp 中 显示 传递 的 数据 。 

完成 本 题 的 操作 步骤 如 下 。 

@ 创建 ASP 动态 网 页 inputl. htm。 选 择 【 修 改 ] 民 页 面 属 性 了 命令 ,在 【标题 】 文 本 框 
中 输入 标题 文字 “QueryString 应 用 实例 ”, 在 【背景 3 文本 框 中 输入 页 面 背 景 颜 色 
#99FFCC。 

@ 在 网 页 上 输入 文字 “传递 数据 ”, 选 中 这 些 文字 在 文字 的 【属性 3 面板 中 设置 文字 的 
属性 ,如 图 11-8 所 示 。 


BB Z 荐 [ 译 ] 酒 面 链接 [showl ssp7Neme= 草 群 ASex= 男 ALovel= 音 乐 Los 国 | 
也 |prro000 ] 3 生 震 菇 目标 | 


图 11-8 在 【链接 了 文本 框 中 输入 传递 的 数据 


@@ 选中 文字 “传递 数据 ”, 在 【链接 了 文本 框 中 输入 : Showl. asp? Name 一 卓 群 & 
Sex 一 男 &Lovel 一 音乐 & Love2 一 旅游 &Love3 王 上 网 ,建立 好 超级 链接 。 

@ 保存 动态 文件 Inputl. asp。 

@@ 创建 asp 动态 网 页 showl1. htm。 在 【标题 】 文 本 框 中 输入 标题 文字 “QueryString 
应 用 实例 ,在 【背景 】 文 本 框 中 输入 页 面 背 景 颜 色 并 CCFFCC。 

@ 单 击 工具 栏 中 【显示 代码 视图 了 按钮 有 .程序 代码 如 下 所 示 : 在 二 body> 与 
过 /body 二 之 间 加 入 如 下 所 示 的 粗 斜 体 的 代码 : 

一 htm1l 一 

一 head 一 

一 meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> 

二 title 一 QueryString 应 用 实例 二 /title 一 
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一 /head 一 
< 二 body bgcolor = " 井 CCEFFCC" 一 
以 下 粗 斜体 字母 为 添加 的 代码 
< 一 各 
dim Name , Sex .Lovel ,Love2 , Love3 
Name = Request . QueryString(" Name") 
Sex = Request. QueryString(" Sex") 
Lovel = Request. QueryString(" Love1") 
Love2 = Request . QueryString(" Love2") 
Love3 = Request . QueryString(" Love3") 
二 
您 好 ! 一 4 = names 二 先生 一 br 二 
您 的 爱好 是 一 = Lovel$ 记 , 一 各 = Iove2 当 二 ,一 4 = love3s 一 
一 /body 二 
=/html> 


@ 保存 网 页 showl. asp。 并 在 上 传 测试 服务 器 后 浏览 网 页 。 
(4) 对 用 Request 的 Form 方法 获取 信息 的 网 页 show. asp 加 以 修改 ,使 其 能 完成 下 
述 功 能 。 
。 用 Session 对 象 存储 从 input. asp 的 表单 中 获取 的 “姓名 ”、“ 爱 好 ”和 “读书 的 看 法 ” 
三 种 信息 ; 
。 对 标题 文字 “以 下 显示 的 是 您 的 个 人 信息 ”建立 超级 链接 ,被 链接 的 网 页 是 
Show2. asp; 
。 在 如 图 11-5 所 示 的 网 页 Show2. asp 中 显示 用 Session 对 象 存储 的 这 三 种 信息 。 
完成 本 题 的 操作 步骤 如 下 。 
@ 打开 网 页 show. asp, 单 击 工 具 栏 中 【显示 代码 视图 按钮 砚 . 在 二 body 二 与 
过 /body 二 之 间 加 入 如 下 所 示 的 粗 斜 体 的 代码 : 
@) 将 其 代码 改 为 : 


一 多 
dim User_ Name,Password,Sex,Love,Idea 
User_Name = Request. Form("txtUserName") 
Password = Request. Form( "txtPassWord") 
Sex = Request. Form("radSex") 
Love = Request. Form("chkLove") 
Idea = Request. Form("txtIdea") 
描 加 以 下 三 行 代码 
Session("s_Username") = User_Name 
Session("s Love") = Love 
Session("s_ Idea") = Idea 

名 二 


图 选中 标题 文字 “以 下 显示 的 是 您 的 个 人 信息 ”, 在 【属性 了 面板 中 建立 与 网 页 
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Show2. asp 超级 链接 ,并 保存 文件 。 
@ 创建 ASP 动态 网 页 show2. htm。 单 击 工具 栏 中 【显示 代码 视图 】 按 钮 吕 , 在 
一 body 二 与 二 /body 二 之 间 加 入 如 下 所 示 的 粗 斜 体 的 代码 : 


< 一 和 

dim user , Love , Idea 

user = Session("S UserName") 

Love = Session("S love") 

Idea = Session("S Idea") 

user = user &" 您 好 ! 欢迎 您 光临 网 上 书店 ." 

Love = user &" 您 的 爱好 是 : "& Love 

Idea = user &" 您 对 读书 的 看 法 是 : "& Idea 
名 二 

= =user% 二 一 br 一 

= 名 =Love% 二 二 br 二 

一 儿 = ideag 二 


@ 添加 代码 后 保存 文件 。 

(5) 按 题 意 要 求 用 Application 对 象 制作 一 个 如 图 11-6 所 示 简 单 的 聊天 室 , 以 talk. 
asp 为 名 保存 文件 ,完成 本 题 的 操作 步骤 如 下 : 

@ 创建 如 图 11-6 所 示 的 含有 表单 域 的 动态 网 页 talk. asp。 其 中 文本 域 为 70 个 字符 
宽 、3 行 .按钮 为 “提交 ”、 页 面 背 景 糊 色 为 # FFFFCC。 

@) 单 击 工具 栏 中 【显示 代码 视图 3 按钮 册 S ,程序 代码 如 下 所 示 , 在 二 Form 请 与 
二 /Form 二 之 后 加 入 如 下 所 示 的 粗 斜 体 的 代码 : 


< 
if trim(request(" txtTalk"))——>"" then 
Application. lock 
Application(" show" ) = request (" txtTalk" )&"— br >"& Application(" show" ) 
"以 上 这 名 代码 的 意思 是 把 新 的 发 言 内 容 加 在 旧 的 发 言 内 容 前 .然后 再 保存 回 Application("show") 
' 中 ,中 间 加 的 二 br 二 的 意义 为 将 每 一 次 发 言 换行 显示 
Application. Unlock 
end if 
Response. Write Application(" show") 
名 二 
@ 保存 文件 。 
4. 实验 后 的 思考 题 


(1) 什么 是 Web 应 用 程序 ? 请 列举 几 种 现实 生活 中 的 Web 应 用 程序 。 

(2) 脚本 语言 ,例如 VBScript、Javascript 等 ,可 以 用 于 网 页 中 ,来 生成 一 些 动 态 的 效 
果 。 那 么 ,是 不 是 租 入 脚本 语言 的 页 面 ,就 可 以 被 称 为 动态 页 面 呢 ? 

(3) 请 简单 描述 Web 应 用 程序 处 理 访问 外 部 资源 的 复杂 动态 页 面 的 工作 流程 。 
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(4) 请 列举 当前 主流 的 三 种 应 用 服务 器 技术 (动态 网 页 技术 ) 。 除 了 本 章 所 述 的 几 种 
Dreamweaver 支持 的 主流 技术 ,你 还 能 举 出 一 种 其 他 的 技术 吗 ? 

(5) 既然 有 那么 多 种 应 用 服务 器 技术 ,并 且 这 些 技术 各 有 优点 ,那么 能 不 能 在 一 个 
Web 站 点 的 开发 中 混用 不 同 的 技术 ? 

(6) 请 列举 当前 主流 的 三 种 数据 库 。 请 查阅 资料 ,比较 各 种 数据 库 的 特性 。 

(7) 请 列举 当前 主流 的 三 种 Web 服务 器 。 请 查阅 资料 ,比较 各 种 Web 服务 器 的 
特性 。 
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~ ll 2 用 户 登 录 和 密码 验证 系统 
名 的 实验 


一 一 校园 网 选课 系统 实验 (1) 


Web 网 站 的 基本 技术 都 是 相似 的 ,为 了 拓宽 读者 的 视野 从 本 实验 开始 ,将 以 校园 网 
的 选课 系统 各 部 分 为 实验 的 内 容 ,请 读者 开始 分 阶段 完成 一 个 完整 的 实验 。 本 实验 主要 
练习 用 户 登 录 和 密码 验证 系统 。 


1. 实验 的 目的 与 要 求 


(1) 熟悉 用 户 登 录 和 密码 验证 系统 的 组 成 部 分 和 设计 。 
(2) 熟悉 用 户 登录 与 授权 级 别 的 基本 概念 

(3) 实现 用 户 登 录 功 能 。 

(4) 实现 账户 信息 修改 。 

(5) 限制 用 户 的 访问 权限 。 

(6) 学 会 使 用 代码 视图 。 

(7) 学 会 使 用 阶段 变量 。 

(8) 养 成 变量 命名 的 好 习惯 。 


2. 系统 功能 与 组 成 


除非 Web 应 用 程序 对 所 有 的 访问 者 提供 完全 相同 的 服务 ,不然 的 话 , Web 应 用 程序 
- 定 需 要 有 用 户 管理 方面 的 子 系统 。 首 先 , 要 能 区 分 出 来 自 不 同 用 户 的 访问 ,并 验证 用 户 

的 身份 是 非 假 冒 , 然 后 才 有 可 能 对 不 同 的 用 户 提供 各 自 不 同 的 个 性 化 服务 ,并 细致 的 进行 
控制 用 户 权 限 。 

校园 网 中 的 选课 系统 有 以 下 几 类 用 户 : 各 院 系 的 学 生 通 过 选课 系统 选择 本 学 期 修 习 的 
课程 ,教务 员 利 用 选课 系统 的 课程 维护 系统 来 输入 可 选 的 课程 信息 :教师 可 能 会 利用 选课 系 
统 查询 选择 自己 开设 的 课程 的 选课 情况 。 对 于 每 一 类 有 用户, 他们 在 选课 系统 中 的 权限 是 不 
一 样 的 。 学 生 只 能 选择 课程 ,而 不 能 修改 课程 信息 :教务 员 只 能 维护 课程 信息 , 却 不 能 有 修 
改 学 生 选 课 信 息 的 权力 ;教师 既 不 能 修改 课程 信息 ,又 不 能 修改 学 生 的 选课 信息 。 

这 种 用 户 的 类 别 ,是 基于 用 户 的 访问 权限 来 划分 的 ,可 以 把 它 叫 做 安全 组 CSecurity 
group) ,Dreamweaver 8 把 它 叫 做 授权 级 别 (Authorization level) 。 

有 关 用 户 资 料 和 授权 级 别 的 信息 存储 在 某 个 数据 库 的 表 中 .一般 来 说 ,为 了 安全 起 


见 , 通 常 由 独立 于 Web 应 用 之 外 的 其 他 应 用 形式 来 维护 或 者 由 Web 应 用 中 的 一 个 独立 
的 用 户 数据 维护 子 系统 来 维护 。 这 里 假设 已 经 存在 这 样 一 个 维护 用 户 资 料 和 授权 级 别 的 
工具 ,并 且 各 院 系 学 生 .教务 员 和 教师 的 用 户 信息 已 经 由 管理 员 用 这 个 工具 输入 到 数据 
库 中 。 

那么 ,选课 系统 的 用 户 登 录 和 密码 验证 系统 主要 包含 用 户 登 录 功 能 .用 户 登 录 失 败 提 
示 和 密码 修改 功能 。 

用 户 登 录 页 面 是 选课 系统 的 主页 面 ,从 校园 网 的 主页 上 有 指向 选课 系统 的 超级 链接 ， 
即 指向 该 页 面 ,从 开发 项 目的 模块 化 和 可 维护 性 考虑 ,整个 选课 系统 的 所 有 页 面 ,都 置 于 
站 点 的 CourseSys 子 文件 夹 下 。 


3. 数据 库 设计 
选课 系统 的 整体 数据 库 设计 ,如 图 12-1 所 示 。 


Selection | stuaent 


Studentno Studentno 
Courseno Hame 


Department 
Ma jor 


-| 一 一 和 
Admin 
Password Adminno 
AuthLevel Name 


图 12-1 校园 网 选课 系统 数据 库 示 意图 


与 本 实验 密切 相关 的 是 Account 表 . 该 表 用 来 存储 用 户 名 、 密 码 和 授权 级 别 。 其 中 : 

。 Username 字段 存放 用 户 名 ; 

。 Password 字段 存放 用 户 密 码 ; 

。 AuthLevel 字段 存放 授权 级 别 ; 

。 UserNo 存放 用 户 编号 (如 果 是 学 生 ,那么 就 等 于 学 号 ;如 果 是 教师 ,那么 就 等 于 教 
师 号 ;如 果 是 教务 员 ,那么 就 等 于 教务 员 号 ) 。 

UserNo 是 唯一 的 ,因此 可 以 把 UserNo 定义 成 主键 。 

如 果 读 者 按 顺 序 做 完 前 几 章 的 实验 ,那么 上 述 的 各 个 数据 库 表 ,包括 初始 的 数据 ,都 

应 该 已 经 由 读者 自己 建立 好 了 。 
初始 数据 中 ,已 经 包含 表 12-1 所 示 的 几 位 人 物 。 


表 12-1 初始 数据 表 Account 


人 名 身 份 用 户 编号 登录 账号 账号 密码 授权 级 别 
Thomas Edison 教务 员 Aol edison 123 admin 
Zhang Yu 学 生 9124018 yzhang yzhang student 
Newton 教师 Tol newton 123 teacher 
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续 表 


人 名 身 份 用 户 编 号 登录 账号 账号 密码 授权 级 别 

Aristotle 教师 To2 aristotle 234 teacher 
Gothe 教师 To3 gothe 345 teacher 
Turing 教师 To4 turing 456 teacher 


4. 实验 的 操作 内 容 


1) 实现 初步 的 用 户 登 录 功 能 

(1) 使 用 前 一 实验 中 在 Dreamweaver 8 中 建立 好 的 My site 站 点 ,新 建 一 个 ASP 
VBScript 技术 的 动态 页 面 。 

(2) 在 新 页 面 中 ,加 入 如 图 12-2 所 示 的 网 页 元 素 。 添 加 一 个 表单 ,表单 包含 的 元 素 
见 表 12-2 所 示 。 把 这 个 页 面 保存 到 CourseSys 子 文件 夹 下 , 取 名 为 index. asp。 


Cp ep 
文件 四 编 缉 下 )】 查看 如 插入 GD) 修改 昌文 本 加 ) 命 仿 人) 站 点 GE) 窗口 中 ”帮助 0 
表单 ~ 四 | 口 血 司 | 回 回 轩 | 国 团 | 国 加 口 | 国 口 


图 12-2 用 户 登 录 页 面 示意 图 


表 12-2 表单 元 素 


元 素 类 型 属 性 值 说 明 
表单 名 字 : frmLogin 本 表单 
名 字 : txtUsername 节 

文本 域 类 型 :单行 接受 用 户 名 输入 的 文本 框 
名 字 : txtPassword ee i 

文本 域 类 型 密码 接受 用 户 密 码 输入 的 文本 框 
名 字 : btnLogin 

按钮 标签 : 登录 提交 登录 信息 的 按钮 
动作 : 提交 表单 
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(3) 创建 用 户 登录 成 功 后 进入 的 选课 系统 的 功能 选择 页 面 。 

(4) 创建 用 户 登 录 失 败 后 进入 的 失败 信息 提示 页 面 。 

(5) 利用 服务 器 行为 工具 实现 用 户 登 录 功 能 。 

2) 改进 用 户 登 录 功 能 

(1) 利用 阶段 变量 使 选课 系统 记 住 已 经 登录 的 用 户 。 

(2) 用 户 成 功 登 录 后 ,在 主页 面 中 显示 对 具体 用 户 的 欢迎 信息 ,使 登录 画面 变 得 更 
友好 。 

3) 实现 初步 的 用 户 密码 修改 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 

(2) 设计 如 图 12-3 所 示 的 用 户 密码 修改 的 网 页 ,并 添加 如 表 12-3 所 示 的 表单 元 素 。 
把 这 个 页 面 保存 到 CourseSys 子 文件 夹 下 , 取 名 为 modifypasswd. asp。 


1 局 蝇 轩 
文件 四 六 各 下 ) 查看 W) 插入 加 ) 修改 文本 号令 站 点 人 窗口 外 帮助 0D 
表单 回 | 口 护 国 | 回回 回 | 国 团 | 男 加 口 | 回 口 


开明 名 称 值 W 隧 巧 到 “| 动作 提交 表 单 
Baer | 〇 下 记过 折 


图 12-3 用 户 密码 修改 页 面 示意 图 


表 12-3 ”表单 元 素 


元 素 类 型 属 性 什 说 明 
表单 名 字 : frmModifyPassword 本 表单 
文本 域 ee 接受 新 的 用 户 密码 输入 的 文本 杠 
类 型 : 密码 
文本 域 名 字 : txtConfirmPassword | 接受 用 户 再 次 输入 新 密码 用 于 核对 的 文本 杠 
类 型 : 密码 
名 字 : btnModify 
按钮 标签 : 确认 修改 提交 新 密码 信息 的 按钮 
动作 : 提交 表单 


(3) 创建 修改 用 户 密 码 成 功 后 进入 的 成 功 信息 提示 页 面 。 
(4) 利用 服务 器 行为 工具 实现 修改 用 户 密码 功能 。 
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4) 防止 未 经 登录 访问 用 户 密码 修改 页 面 

利用 服务 器 行为 工具 实现 防止 用 户 未 经 登录 而 修改 用 户 密码 的 功能 , 当 出 现 这 种 情 
况 时 ,将 用 户 引 导 到 登录 页 面 。 

5) 改进 密码 修改 页 面 ,实现 两 次 密码 输入 的 核对 功能 ,通过 两 次 密码 输入 核对 来 保 
证 密码 输入 无 误 。 如 果 新 密码 输入 有 误 , 应 提供 报错 信息 。 


5. 实验 的 参考 步骤 


1) 实现 初步 的 用 户 登 录 功 能 

(1) 使 用 前 一 实验 中 在 Dreamweaver 8 中 建立 好 的 My site 站 点 ,新 建 一 个 ASP 
VBScript 技术 的 动态 页 面 。 

@D 选择 主 菜单 中 的 【文件 了 代 新 建 ] 命 令 ,弹出 如 图 12-4 所 示 的 对 话 框 。 


误 
恒 


ASP JavaScript 


ColdFusion 
ColdFusion 组 件 
JSP 

PHP 


多 多 匈 匈 铭 匈 全 多 | 


框架 集 
页 面 设计 (css) 


入 门 页 面 
页 面 设计 ( 有 辅助 功能 的 ) 


四 VEScript FE Active Server 
ages (ASP) 。 


文档 类 型 DTD) : 
XHTWL 1.0 Transitional 国 


图 12-4 【新 建文 档 ] 对 话 框 


@ 这 一 次 创建 的 是 动态 页 面 , 因 此 在 【类 别 了 框 中 选择 【动态 页 了 ,在 右边 出 现 的 【动态 
页 类 型 选项 中 ,选择 KASP VBScript】, 单 击 【 创 建 3 按 钮 ,这 样 就 会 创建 一 个 新 的 支持 采 
用 VBScript 语言 的 ASP 技术 的 无 标题 文档 。 

(2) 在 新 页 面 中 ,加 入 如 题 意 要 求 的 基本 元 素 和 表单 。 

DO 在 网 页 中 加 入 用 户 名 和 密码 的 表单 .具体 步骤 略 。 

@ 用 户 登 录 页 面 先 创建 到 这 里 ,其 他 功能 先 暂 缓 实现 。 把 这 个 页 面 保 存 到 
CourseSys 子 文件 夹 下 , 取 和 名 为 index. asp。 

(3) 创建 用 户 登 录 成 功 后 进入 的 选课 系统 的 功能 选择 页 面 。 

Oa 创建 一 个 ASP VBScript 的 空 页 面 。 

@ 简单 的 写 一 句 话 , 例 如 “您 已 经 成 功 地 登录 了 校园 网 选课 系统 ”。 
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@) 以 main. asp 为 名 将 网 页 保存 到 CourseSys 子 文件 夹 下 。 

(4) 创建 用 户 登 录 失 败 后 进入 的 失败 信息 提示 页 面 。 

@D 创建 一 个 如 图 12-5 所 示 的 失败 信息 页 面 ,网 页 上 输入 文字 “您 必须 正确 登录 后 ， 
才 可 以 使 用 选课 系统 的 功能 !” 


reanweaver 8 一 [EME7 site\Connections\illegal.asp (XHTEL)#] 


时 ) 查看 WD) 插入 加 ) 修改 昌文 本 并) 命令 人 E) 站 点 区 ) 窗口 四 才 助 0D 


屿 加 点 | 国 国 国 - 贸 - 阅 男 @| 因 - 邮 


图 12-5 登录 失败 页 面 示意 图 


@ 输入 文字 “返回 登录 页 面 1”, 以 这 些 文字 为 超级 链接 的 源 端点 ,建立 与 index. asp 
的 超级 链接 。 

@@ 以 illegal. asp 为 名 将 网 页 保存 到 CourseSys 子 文件 夹 下 。 

(5) 利用 服务 器 行为 工具 实现 用 户 登 录 功 能 。 

J 重新 打开 用 户 登 录 页 面 文件 index. asp。 

@ 在 【应 用 程序 】 浮 动 面板 中 ,选择 【服务 器 行为 选项 卡 , 单 击 请 按钮 ,会 弹出 如 
图 12-6 所 示 的 菜单 ,选择 〖 用 户 身 份 验 证 3IK 登 录用 户 3 命 令 。 


ES 加 | 拉 区 | STYI F1 国志 cs Jiejz 至 
方正 二 人 司 | 大 小 |24 ” 疯 |[ 仿 床 g< 汪 | 。 有 |e30000 


图 12-6 登录 用 户 页 面 


@ 接 下 来 会 弹出 如 图 12-7 所 示 的 对 话 框 。 
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:| fmLogin 


:| txtUsername 


:| txtPassword 


: |CourseSys 


:| abo. Account 


:|Username 


密码 列 : |Password 


如 果 登 录 成 功 ， 转 到 : nain_asp GE 


转 到 前 一 个 URLC 如 果 它 存在 》 
如果 登录 失败 ， 转 到 : [iiegal asp GE J 


基于 以 下 项 限制 访问 : O 〇 ”用户 名 和 密码 
加 用 户 名 、 密 码 和 访问 级 别 
获取 级 别 自 : | AuthLeval 


图 12-7 ”用户 登录 参数 设置 对 话 框 


。 在 【从 表单 获取 输入 】 下 拉 列 表 框 中 ,选择 frmLogin 表单 ,表示 用 户 登 录 信 息 从 
frmLogin 表单 内 的 元 素 的 输入 中 获取 。 
。 在 【用 户 名 字段 】 下 拉 列 表 框 中 选择 txtUsername 文本 框 , 表 示 用 户 名 信息 从 该 文 


本 框 中 得 到 。 
。 在 【密码 字段 】 下 拉 列 表 框 中 选择 txtPassword 文本 框 , 表 示 用 户 密码 信息 从 该 文 
本 框 中 得 到 。 
@ 在 【使 用 连接 验证 了 F 拉 列表 框 中 ,选择 CourseSys 数据 库 连 接 , 表 示 用 户 数据 库 
通过 该 链接 来 访问 。 
。 在 【表格 下 拉 列 表 框 中 ,选择 dbo. Account 数据 表 , 这 是 选课 系统 的 用 户 账号 信 
息 表 。 


。 在 【用 户 名 列 了 下 拉 列 表 框 中 ,选择 Username 字段 ,因为 这 是 用 户 账号 信息 表 中 

代表 用 户 名 的 字段 ,Web 应 用 会 用 此 字段 与 用 户 输入 的 用 户 名 信息 比较 。 

。 在 【密码 列 了 下 拉 列 表 框 中 ,选择 Password 字段 ,因为 这 是 用 户 账 号 信息 表 中 代表 

密码 的 字段 ,Web 应 用 会 用 此 字段 与 用 户 输入 的 用 户 密 码 信 息 比 较 。 

@ 接 下 来 的 对 话 框 部 分 指明 用 户 登录 页 面 得 到 验证 结果 后 采取 的 动作 ,可 以 指明 当 
登录 成 功 后 , 跳 转 到 哪个 页 面 ,登录 失败 后 跳 转 到 哪个 页 面 ,这 两 个 页 面 都 可 以 通过 单 击 
【浏览 3 按钮 直接 在 本 地 站 点 中 找 。 

当 未 登录 的 用 户 试 图 访问 只 有 登录 后 才能 访问 的 页 面 .那个 页 面 可 能 会 引导 用 户 到 
登录 页 面 , 在 这 种 情况 下 ,如 果 选 择 [ 转 到 前 一 个 URL( 如 果 它 存在 )] 复 选 框 ,那么 登录 成 
功 后 会 返回 用 户 试 图 访问 的 那个 页 面 。 

@ 接 下 来 的 对 话 框 内 容 指 明了 整个 选课 系统 的 用 户 权 限 控制 方式 ,因为 选课 系统 用 
访问 级 别 来 区 分 教师 .学生 和 教务 员 的 权限 ,因此 ,应 该 选择 基于 【用 户 名 、 密 码 和 访问 级 
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别 了 来 限制 访问 ,并且 在 【获取 级 别 自 了 下 拉 列 表 框 中 ， 
选择 AuthLeval, 因 为 这 是 Account 数据 表 中 代表 访问 
级 别 的 字段 ,用 户 的 访问 级 别 由 它 决定 。 

@ 单 击 【 确 定 了 按钮 完成 对 话 框 的 设置 . 回 到 
Dreamweaver 8 主 画 面 后 ,可 以 看 到 【应 用 程序 3 浮动 面 
板 的 【服务 器 行为 3 选项 卡 中 多 了 登录 用 户 了 服务 器 行 


为 ,如 图 12-8 所 示 。 图 12-8 【登录 用 户 3 服 务 器 行为 
用 户 登 录 页 面 的 基本 功能 已 经 完成 了 ,保存 网 页 index. asp。 
实验 效果 : 


同步 站 点 之 后 ,就 可 以 测试 一 下 登录 功能 了 。 打 开 浏 览 器 ,在 地 址 栏 中 直接 输入 用 户 
登录 页 面 的 URL ,例如 http: //10. 10. 1.4/CourseSys/index. asp。 按 回 车 键 确定 后 ,会 
出 现 如 图 12-9 所 示 的 画面 。 


@ 扣 -日 - 国 国 的 | Pr 六 mx @ 后- 怠 国 加 


图 12-9 ”校园 网 选课 系统 用 户 登录 页 面 


在 用 户 登 录 页 面 中 输入 正确 的 用 户 名 和 口令 后 , 单 击 【 登 录 】 按 钮 ,会 跳 转 到 如 
图 12-10 所 示 的 画面 , 即 目前 的 main. asp 页 面 。 


当 迎 进入 壮 园 网 这 得 系 统 


您 已 经 成 功 地 登录 了 校园 网 演 课 系统 


图 12-10 ”用户 登 录 成 功 页 面 
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回 到 登录 画面 :如 果 输 入 不 正确 的 登录 信息 , 单 击 【登录 了 按钮 ,会 跳 转 到 如 图 12-11 
所 示 的 画面 , 即 illegal. asp 页 面 。 


午 大 陆 失败 页 面 - 了 icrosoft Internet Explorer 
编辑 邓 ) 查看 如) 收 阅 外) 工具 0) 帮助 


@Aame- 日 国 国 久 Pe 次 mx 如 | 全 -全 国志 


瑞 广 | 忽 http://10. 10. 1 2/CowrseSys/illeesl asp 


图 12-11 用 户 登 录 失败 页 面 


注意 : 

从 现在 开始 ,有 兴趣 的 读者 可 以 经 常 单 击 文 档 工具 栏 中 的 国 ( 代 码 视 图 按钮 ) 来 查看 
页 面 的 HTML 源 代码 在 使 用 了 Dreamweaver 8 工具 前 后 的 变化 , 试 着 读 懂 那些 代码 ,这 
对 深入 理解 Dreamweaver 8 的 开发 机 制 会 有 很 大 的 帮助 。 

2) 改进 用 户 登 录 功 能 

(1) 利用 阶段 变量 使 选课 系统 记 住 已 经 登录 的 用 户 。 

分 析 : 

在 教材 的 第 9 章 中 讲 到 ASP 的 Session 对 象 ,用 于 存储 特定 的 用 户 会 话 所 需 的 信息 。 
当 用 户 在 应 用 程序 的 页 之 间 跳 转 时 ,存储 在 Session 对 象 中 的 变量 不 会 丢失 ,而 是 在 整个 
用 户 会 话 中 一 直 存 在 下 去 。Session 对 象 所 存储 的 所 有 变量 ,在 Dreamweaver 8 中 都 称 作 
阶段 变量 。 

在 Dreamweaver 8 用 户 登 录 服 务 器 行为 自动 添加 的 源 代码 中 ,可 以 看 到 一 句 Session 
("MM_Username") 二 MM _valUsername, 这 是 Dreamweaver 8 让 这 个 用 户 登 录 页 面 在 
登录 成 功 后 ,自动 地 把 用 户 输入 的 用 户 名 保存 到 名 
为 MM_Username 的 阶段 变量 中 ,那么 在 用 户 进 入 
选课 系统 应 用 的 其 他 动态 页 面 时 ,就 可 以 使 用 这 个 
阶段 变量 存储 的 用 户 名 的 信息 。 pp 

完成 本 题 的 操作 步骤 如 下 。 请 

GO 打开 用 户 登 录 程 序 index. asp。 

@ 在 【应 用 程序 3 浮动 面板 中 ,选择 【 绑 定 3 选 
项 卡 , 单 击 齐 让 按钮 ,会 弹出 如 图 12-12 所 示 的 菜单 ， 
选择 [阶段 变量 了 命令 。 

@ 在 如 图 12-13 所 示 的 对 话 框 里 , 填 人 用 户 名 对 应 的 阶段 变量 名 MM_User- 
name。 

@ 单 击 【确定 了 按钮 后 ,在 【 绑 定 了 选项 卡 中 可 以 看 到 新 定义 的 阶段 变量 ,如 图 12-14 
所 示 。 
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图 12-12 ”选择 [阶段 变量 了 命令 示意 图 


数据 库 花王 二 服务 器 行为 | 组 件 


: lm Usernane 


# MN_Username 


图 12-13 【阶段 变量 3 对 话 框 图 12-14 创建 后 的 【阶段 变量 了 示意 图 


@@ 这 样 定义 之 后 ,就 可 以 在 其 他 页 面 使 用 这 个 阶段 变量 了 ,在 编辑 其 他 动态 页 面 时 ， 
将 都 可 以 在 【 绑 定 3 选 项 卡 中 看 到 这 个 阶段 变量 。 

(2) 用 户 成 功 登 录 后 ,在 主页 面 中 显示 对 具体 用 户 的 欢迎 信息 ,使 登录 画面 变 得 更 友 
好 ,完成 本 题 的 操作 步骤 如 下 。 

@ 打开 网 页 main. asp。 

G@ 在 页 首 加 入 一 句 话 “ 您 好 !1”, 然 后 从 【 绑 定 】 选 项 卡 中 找到 MM_Username 阶段 变 
量 , 将 它 拖 动 到 * 您 好 1 后面 ,结果 如 图 12-15 所 示 。 


网 E:\My site\CourseSys\main. asp (XHINL)* 


i Session, MM_ Username) 


< | > 
<bodv>[<table) [ND loo% vez2 x i178v 2K/1 秒 


图 12-15 添加 阶段 变量 后 的 页 面 


实验 效果 : 
同步 站 点 后 ,来 测试 一 下 效果 。 正 确 登录 后 .这 一 次 用 户 将 看 到 亲切 的 问候 语 。 如 
图 12-16 所 示 。 


马 登录 成 功 页 面 -~ icrosoft Internet Explorer 
es 查看 es 工具 代 ) 才 助 0D 


您 好! yzhang 


元 


| 大 Internet 


图 12-16 浏览 添加 阶段 变量 后 的 页 面 
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3) 实现 初步 的 用 户 密码 修改 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 

@ 选择 主 菜单 中 的 【文件 了 区 新 建 ] 命 令 ,弹出 【新 建文 档 ] 对 话 框 。 

@ 创建 的 是 动态 页 面 ,在 【类 别 了 框 中 选择 【动态 页 选项 ,在 动态 页 类 型 选项 中 ,选择 
【ASP VBScript3. 单 击 【5 创建 按钮 :创建 一 个 新 的 支持 采用 VBScript 语言 的 ASP 技术 的 
网 页 文档 。 

@ 由 于 同一 应 用 可 以 共享 数据 库 连 接 , 因 此 这 个 页 面 仍 然 可 以 使 用 CourseSys 数据 
库 连 接 , 不 需要 另外 定义 。 

(2) 在 新 页 面 中 ,加 入 如 题 意 要 求 的 基本 元 素 和 表单 。 把 这 个 页 面 保 存 到 CourseSys 
子 文件 夹 下 , 取 名 为 modifypasswd. asp。 

Oz 按照 题 意 添加 元 素 和 表单 ,具体 步骤 略 。 

@) 选择 主 菜单 中 的 [文件 3IK 保 存 3 命 令 ,把 这 个 页 面 保存 到 CourseSys 子 文件 夹 下 ， 
取 名 为 modifypasswd. asp。 

(3) 创建 用 户 密码 修改 成 功 后 的 信息 提示 页 面 。 

创建 一 个 如 图 12-17 所 示 的 用 户 密 码 修 改 成 功 后 的 信息 提示 页 面 ,并 将 其 保存 为 


CourseSys\modifysuccess. asp。 


是 回 
ER 


图 12-17 密码 修改 成 功 页 面 


(4) 利用 服务 器 行为 工具 实现 修改 用 户 密 码 功 能 。 

分 析 : 

修改 用 户 密 码 , 实 际 上 是 要 对 选课 系统 数据 库 的 Account 用 户 账 户 数据 表 中 的 某 一 
条 记录 , 即 某 一 个 用 户 的 信息 进行 更 新 ,其 中 更 新 的 仅 是 这 条 记录 的 Password 字段 ;为 
实现 更 新 功能 ,必须 定义 对 这 一 条 用 户 账 户 记 录 的 引用 , 即 定义 一 个 仅 含 一 条 记录 的 记录 
集 ,因此 这 个 实验 要 求 的 第 一 个 要 点 是 如 何 利 用 筛选 功能 建立 仅 包 含 某 一 个 特定 用 户 的 
记录 集 。 其 次 .Dreamweaver 8 并 没有 提供 专门 用 于 修改 用 户 密码 的 服务 器 行为 ,修改 用 
户 密码 的 动作 ,包括 扩展 到 修改 用 户 账户 信息 的 动作 ,其 实质 都 是 对 一 条 记录 进行 更 新 的 
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动作 ,因此 可 以 利用 [更 新 记录 】 服 务 器 行为 来 实现 。 

以 下 是 生成 仅 包含 某 一 个 特定 用 户 的 记录 集 的 方法 ,完成 本 题 的 操作 步骤 如 下 。 

@ 打开 用 户 密 码 修 改 文 件 modifypassword. asp。 

Q@ 在 【应 用 程序 3 浮动 面板 中 .选择 【 绑 定 3 选项 卡 , 单 击 靖 出 按 钮 ,选择 [记录 集 】 ,可 见 
如 图 12-18 所 示 的 对 话 框 ;在 【和 名称] 中 输入 给 记录 和 集 取 的 名 字 ; 在 【连接 3 下 拉 列 表 框 中 选 
择 要 使 用 的 数据 库 连 接 ;在 【表格 3 中 选取 dbo. Account 表 ; 在 【 列 了 单 选 按钮 处 接受 默认 
的 【全 部 ] 即 可 。 


stThisAccount 


;|CourseSys 


:| dbo. Account 


: 全 部 。” 〇 选 定 的 : 


区 
了 
A 

User 


: |Username ~ 
阶段 变量 国 | lw Vsernane 
无 园 | 升序 


图 12-18 【记录 集 3 对 话 框 


@ 接 下 来 是 使 得 记录 集 只 包含 符合 和 划 选 条 件 的 记录 ,在 【和 划 选 了 右边 的 下 拉 列 表 框 中 
选择 Username ,表示 条 件 表达 式 的 左边 是 Username 字段 ,在 右边 的 比较 符号 里 选择 
“二 ”, 表 示 要 进行 值 是 否 相 等 的 比较 ,在 Username 下 方 的 下 拉 列 表 框 中 选择 【阶段 变 
量 】 ,表示 条 件 表达 式 的 右边 值 的 类 型 是 阶段 变量 ,在 右边 的 文本 框 中 输入 代表 当前 用 户 
名 的 阶段 变量 名 : MM_Username; 这 步 生 成 一 个 Username 一 MM_Username 的 表达 式 ， 
表示 记录 集 包 含 的 记录 必须 满足 用 户 名 字段 等 于 MM_Username 的 值 .对 于 这 个 例子 来 
说 ,返回 的 记录 集 里 仅 包 含 当 前 用 户 的 用 户 账号 记录 。 

@ 单 击 [测试 3 按钮 ,可 以 测试 记录 集 定 义 的 正确 性 ,由 于 此 时 页 面 尚 未 运行 ,MM _ 
Username 并 没有 值 ,因此 会 弹出 如 图 12-19 所 示 的 对 话 框 要 求 提供 一 个 值 用 于 测试 。 


请 提供 测试 值 给 阶段 变量 : INI_Usernanme 


测试 值 : [yzhand 


图 12-19 【请 提供 一 个 测试 值 ] 对 话 框 


@ 输入 用 于 测试 的 用 户 名 ,并 单 击 【 确 定 了 按钮 :此 时 可 以 看 到 如 图 12-20 所 示 的 画 
面 : 其 中 列 出 了 用 测试 值 生成 的 记录 集 包 含 的 记录 内 容 。 
@ 测试 完 后 : 单 击 【确定 了 按钮 完成 记录 集 的 定义 :此 时 在 【 绑 定 3 选 项 卡 中 可 以 看 到 


实验 1 用 户 登 录 和 密码 验证 系统 的 实验 Si 


测试 5QL 指 令 


AuthLevel 


| VserNo 


student 


9124018 


| 


_ Was 个) ] [ Fs 个 op 


图 12-20 显示 [记录 集 ] 包 含 的 i 


刚刚 定义 的 记录 集 , 如 图 12-21 所 示 。 


(5) 利用 【更 新 记录 了 服务 器 行为 生成 用 户 密 
码 修 改 的 功能 的 方法 ,完成 本 题 的 操作 步骤 如 下 。 

x 在 【服务 器 行为 3 选项 卡 中 添加 一 个 【更 新 
记录 了 的 行为 ,在 添加 菜单 里 选择 【更 新 记录 了 后， 
将 看 到 如 图 12-22 所 示 的 画面 。 

@@【 更 新 记录 】 对 话 框 的 各 项 参数 意义 如 下 。 
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在 【连接 了 下 拉 列 表 框 里 选择 CourseSys 数 
据 库 连 接 。 日 
在 【要 更 新 的 表格 下拉 列表 框 里 选择 
dbo. Account, 表 示 要 对 这 个 数据 表 中 的 
记录 做 更 新 。 


CC 本 号 


己 录 内 容 


Username 
Password 


AuthLevel 
Userko 
[第 一 个 记录 
[最 后 一 个 记 . 
[总 记录 数 ] 
讲 Session 
F MMUsernane 


图 12-21 定义 好 的 【记录 集 了 内 容 


在 【选取 记录 自 了 下 拉 列 表 框 里 选择 rstThisAccount 记录 集 .表示 要 更 新 的 记录 范 


围 由 这 个 记录 集 选 定 。 
在 【唯一 键 列 J 下 拉 列 表 框 里 选择 Username. 因 
录 的 字段 ,当然 也 可 以 选择 主键 UserNo。 


为 这 是 一 个 可 以 唯一 确定 一 条 记 


在 【在 更 新 后 , 转 到 文本 框 中 输入 更 新 以 后 转 到 那个 页 面 ,可 以 单 击 【浏览 直接 


从 本 地 站 点 中 选取 页 面 。 
【更 新 记录 了 对 话 框 的 下 半 部 分 的 选项 , 决 
Dreamweaver 所 说 的 列 ) 的 取 值 。 


定 了 更 新 时 各 待 更 新 字段 ( 即 


在 〖 获 取 值 自 3 下 拉 列 表 框 里 选择 frmModifyPassword 表单 .表示 字段 的 新 值 从 该 


表单 元 素 的 输入 中 得 到 。 
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:|coursesys 


:| dbo. Account 


;|rstThisAccount 


:| Username 


[modifvsuccess. asp 


frmlodi fyPassword 


tenP a wor dp 
:| txtConfirmPassword < 也 


图 12-22 【更 新 记录 对话 框 


。 在 【表单 元 素 ] 列 表 框 中 , 列 出 了 表单 的 各 个 元 素 和 每 个 元 素 将 更 新 哪 一 个 字段 ， 
选中 txtNewPassword 后 ,在 下 面 的 【 列 了 JJ 下拉 列表 框 中 选择 【Password], 表示 
txNewPassword 的 值 将 用 来 更 新 dbo. Account 表 中 在 rstThisAccount 记录 集 选 
定 范 围 内 的 这 些 记 录 的 Password 字段 。 

。 在 【提交 为 了 下 拉 列 表 框 中 ,选择 【文本 选项 ,表示 更 新 Password 字段 时 ,将 该 值 
的 类 型 理解 为 文本 类 型 。 

G) 单 击 【确定 了 按钮 完成 服务 器 行为 的 定义 ,密码 修改 功能 完成 了 ,当然 为 了 访问 这 
一 功能 .得 先 在 main. asp 中 加 一 个 指向 密码 修改 页 面 的 超级 链接 。 

实验 效果 : 

同步 站 点 后 ,就 可 以 测试 一 下 密码 修改 的 功能 了 。 正 常 登录 后 ,进入 如 图 12-23 所 示 
的 密码 修改 页 面 。 


入 无 标题 文档 - Wicrosoft Internet Explorer 
文件 下 ) 编辑 EE) 查看 名) 收 若 ) 工具 CD) 帮助 0 


@a- 日 -四 四 的 Par 次 ex 加 | 全- 马 国 温 


于 建 | 入 http://10 10.1.2/Coarsesysyaainmena «sp 


3 光 迎 进入 秀 加 网 这 得 系统 


蕉 国 加 和 运 伴 系 耽 


图 12-23 用 户 密码 修改 页 面 


实验 好 用 户 登 录 和 密码 验证 系统 的 实验 53; 


在 输入 新 密码 后 : 单 击 【确认 修改 了 按钮 后 .可 以 看 到 如 图 12-24 所 示 的 画面 。 如 果 回 
到 登录 画面 ,会 发 现 使 用 旧 密 码 已 经 不 能 成 功 登 录 , 只 有 用 新 密码 才能 成 功 登录 。 


EE TVEEREEEEDIOEE 
文件 区 ) ”编辑 EE) ”查看 名) 收 巷 入 ) 工具 I) 帮助 00 


i- 日 . 国 国 铭记 时 闪 Wax @ 让- 学 辐 汶 


地 址 m) | 起 | http://10. 10. 1.2/ courseSys/mainmenu.asp 


这 次 迎 进 入 秒 园 同 这 和 社 系 统 


恭喜 您 1 Yzhang 
密码 修改 已 成 功 ! 


图 12-24 用 户 密码 修改 成 功 提示 页 面 


4) 防止 未 经 登录 访问 用 户 密码 修改 页 面 

利用 服务 器 行为 工具 实现 防止 用 户 未 经 登录 而 修改 用 户 密码 的 功能 , 当 出 现 这 种 情 
况 时 ,将 用 户 引导 到 登录 页 面 , 完 成 本 题 的 操作 步骤 如 下 。 

(1) 打开 用 户 密码 修改 页 面 : 在 [应 用 程序 了 浮动 面板 的 【服务 器 行为 3 选项 卡 中 选择 
添加 菜单 的 5 用户 身份 验证 了 区 限 制 对 页 的 访问 3 命令 。 

(2) 接 下 来 将 看 到 如 图 12-25 所 示 的 对 话 框 , 在 【基于 以 下 内 容 进 行 限制 3 单 选 按钮 
组 中 选择 [用户 名 和 密码 了 .因为 对 密码 修改 页 面具 需要 检查 用 户 名 和 密码 ,不 需要 检查 访 
问 级 别 , 所 有 访问 级 别 的 用 户 都 要 使 用 该 页 ;在 【如 果 访 问 被 拒绝 , 则 转 到 】 文 本 框 中 输入 
登录 页 面 的 本 地 站 点 路 径 。 


限制 对 页 的 访问 


基于 以 下 内 容 进行 限制 : @ ”用 户 名 和 密码 
〇 有 ”用 户 名 、 密 码 和 访问 级 别 


选 职级 别 : 


如 果 访 问 被 拒绝 ， 则 转 到 : 


图 12-25 【限制 对 页 的 访问 3 对 话 框 


(3) 单 击 【确定 按钮 完成 设置 。 
实验 效果 : 
同步 站 点 后 来 测试 一 下 。 这 回 直接 输入 完整 的 URL 后 .如 我 们 所 希望 的 ,用 户 被 引 
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导 到 登录 页 面 , 见 图 12-26。 读 者 可 以 仔细 看 一 看 地 址 栏 里 显示 的 URL, 看 它 起 什么 
作用 ? 

正确 登录 后 ,页 面 回 到 了 刚才 试图 访问 的 URL. 即 用 户 密码 修改 页 面 , 而 不 是 通常 登 

后 进入 的 main. asp。 还 记得 生成 用 户 登 录 功 能 时 的 一 个 选项 吗 ? 是 哪个 选项 起 了 
作用 ? 


乌 无 标题 文档 一 


12-26 进入 用 户 登录 页 面 


5) 通过 两 次 密码 输入 核对 来 保证 密码 输入 无 误 

改进 密码 修改 页 面 .实现 两 次 密码 输入 核对 的 功能 .如果 新 密码 输入 有 误 , 应 提供 报 
错 信息 。 

分 析 : 

Dreamweaver 8 并 没有 专门 针对 用 户 密 码 修改 提供 自动 生成 程序 代码 的 功能 ,实现 
密码 修改 功能 的 方法 ,实际 上 是 借用 了 Dreamweaver 8 的 【更 新 记录 了 服务 器 行为 工具 。 
但 是 该 工具 并 没有 提供 两 次 密码 输入 核对 的 功能 。 在 【更 新 记录 】 无 法 完全 满足 要 求 的 情 
况 下 ,只 能 修改 自动 生成 的 程序 代码 ,来 满足 开发 者 的 要 求 。 

完成 本 题 的 操作 步骤 如 下 。 

Oz 将 编辑 窗口 转 入 代码 视图 。 

@ 找到 以 注释 


'#* x* ¥ Update Record: construct a sql update statement and execute it 开头 的 一 % $% 二 


代码 段 ; 这 段 代码 是 Dreamweaver 8 自动 生成 用 于 在 用 户 单 击 表单 的 “确认 更 新 ”按钮 后 ， 
执行 Account 表 更 新 动作 的 代码 。 

@ 用 以 下 的 代码 把 原来 的 代码 段 包 起 来 ,形式 如 下 所 示 。 

~s% 

"< x* < Update Record: construct a sql update statement and execute it 


if (CStr(Request. Form("txtNewPassword")) = Cstr(Request. Form("txtConfirmPassword"))) then 
原来 的 代码 段 


实验 人 用 户 登 录 和 密码 验证 系统 的 实验 一 一 5 


else 


response. Write(" 两 次 输入 的 密码 不 符 1") 
end if 


名 > 


@ 这 样 就 给 原 有 的 更 新 动作 加 上 了 一 个 条 件 , 也 就 是 说 , 当 表 单 的 txtNewPassword 
和 txtConfirmPassword 两 个 元 素 的 输入 值 作 为 字符 串 类 型 来 比较 ,如 果 相 同 的 话 , 就 执 
行 原来 的 代码 段 , 执 行 更 新 动作 ;否则 ,在 服务 器 生成 返回 的 HTML 代码 时 , 先 输 出 “两 
次 输入 的 密码 不 符 1” 的 提示 信息 。 

实验 效果 : 

同步 站 点 后 ,来 测试 一 下 。 当 在 密码 修改 页 面 的 两 次 输入 新 密码 时 ,有 意 输入 不 一 致 
的 密码 后 , 单 击 【确认 修改 了 按钮 ,页 面 会 变 成 如 图 12-27 所 示 的 样子 。 


邹 无 标题 文档 - Hicrosoft Internet Explorer 
文件 中) ”编辑 区) 查看) 收藏 和 ) 工具 CI) 帮助 00 


@ 提 -日 - 国 国 多 Pe 次 mx @| 全 -全 国志 


地 址 鲁 ) | 四 http://10.10.1 2/CourseSys/modifypasswd asp 


图 12-27 显示 两 次 输入 的 密码 不 符 


6. 实验 后 的 思考 题 


(1) Dreamweaver 8 一共 提供 了 多 少 类 服务 器 行为 ? 请 整理 这 些 服务 器 行为 ,并 查 
阅 文档 了 解 这 些 服务 器 行为 分 别 能 够 帮助 读者 完成 什么 功能 。 

(2) 本 书 配 套 教 材 里 并 没有 介绍 【注销 用 户 了 服务 器 行为 ,查阅 文档 了 解 它 的 用 途 ,请 
读者 自己 设计 补充 实验 ,尝试 这 个 工具 的 用 法 (可 以 在 本 实验 的 基础 上 做 ) 。 

(3) 用 户 密码 和 验证 系统 应 该 包括 哪些 功能 ? 读者 如 果 使 用 过 一 些 网 上 购物 的 网 
站 ,回忆 一 下 , 同 这 个 实验 比较 。 

(4) 不 同 的 授权 级 别 通 过 什么 原则 来 划分 ? 请 读者 自己 设想 一 个 应 用 环境 ,其 中 包 
含 不 同 的 授权 级 别 , 并 定义 不 同 授权 级 别 的 权限 表 。 

(5) 本 书 配 套 教材 里 的 用 户 密 码 和 本 书 中 的 用 户 密码 ,在 用 户 账 号 表 中 都 是 以 文本 
形式 明码 存放 的 ,数据 库 的 用 户 能 够 看 到 所 有 用 户 的 密码 ,这 种 存放 方式 很 不 安全 ,有 没 
有 什么 好 的 方法 来 存放 密码 呢 ? (请 读者 参阅 密码 学 与 网 络 安全 方面 的 资料 ) 
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13 输入 、 修 改 和 查询 系统 的 


一 一 校园 网 选课 系统 实验 (2) 


1. 实验 的 目的 与 要 求 


(1) 深入 理解 授权 级 别 限制 用 户 的 访问 权限 。 

(2) 熟悉 录入 、 修 改 和 查询 系统 的 实现 。 

(3) 熟悉 动态 表单 元 素 的 使 用 和 原理 (对 应 服务 器 行为 )。 

(4) 熟悉 引用 动态 文本 和 数据 的 两 种 方法 ( 拖 动 和 利用 闪电 符号 )。 

(5) 熟悉 记录 和 集 定义 的 各 种 变化 和 设置 。 

(6) 熟悉 和 复习 【插入 记录 】【 更 新 记录 3】 和 【用 户 身份 验证 3 等 服务 器 行为 。 

(7) 熟悉 【重复 区 域 ]【 记 录 集 分 页 7 和 【显示 区 域 ] 等 服务 器 行为 如 何 相互 配 合 工作 。 


2. 系统 的 功能 与 组 成 


课程 信息 管理 系统 ,包含 供 教务 员 输 入 和 维护 课程 信息 的 功能 ,以 及 公用 的 课程 信息 
查询 功能 。 

教务 员 通 过 课程 信息 输入 功能 来 加 入 新 的 课程 信息 ,通过 课程 信息 修改 功能 来 维护 已 
有 课程 信息 的 变化 ;教师 .学生 和 教务 员 都 可 以 通过 课程 信息 查询 功能 来 得 到 课程 的 相关 信 
息 , 比 如 教务 员 可 以 用 它 来 检查 数据 输入 是 否 有 误 , 学 生 可 以 用 它 来 了 解 课程 的 概况 和 授课 
教师 以 及 学 分 ,以 便 决定 是 否 选 择 该 课 , 教 师 可 以 用 它 随时 了 解 课程 的 选课 人 数 等 。 

实际 的 课程 信息 会 比 这 个 实验 复杂 一 些 , 比 如 是 何 专 业 的 必修 课程 ? 是 何 专业 的 选 
修 课程 ?预备 课程 是 什么 ?” 几 年 级 以 上 才 可 以 选 等 ? 当然 ,作为 实验 不 需要 这 么 复杂 , 读 
者 不 必 太 在 意 实验 本 身 , 重 要 的 是 掌握 选课 系统 实验 背后 的 知识 点 。 有 兴趣 的 读者 可 以 
在 实验 的 基础 上 扩展 ,自己 设计 更 大 的 实验 。 


3. 数据 库 设 计 


回顾 选课 系统 的 整体 数据 库 设 计 , 如 图 13-1 所 示 。 

与 本 实验 密切 相关 的 是 Course 表 , 该 表 用 来 存储 课程 名 称 、 课 程 描 述 、 最 大 选课 人 数 
和 任课 教师 信息 。 其 中 : 

。 Courseno 字段 存放 课程 编号 ; 

。 Name 字段 存放 课程 名 称 ; 


Course 琶 Selection 


Courseno Studentno 
ame Courseno 
Deseription 
Credit 
2 Account 上 

Teacher vsernane bp i 
Teacherno Passwora 国 [saime 
Hame AuthLevel [|iane 
Title VserHo 


图 13-1 校园 网 选课 系统 数据 库 示 意图 


。 Description 字段 存放 课程 描述 ; 

。 Credit 字段 存放 课程 的 学 分 ; 

。 Maximumnum 存放 最 大 选课 人 数 ,选课 系统 将 用 这 一 信息 来 控制 选择 该 课程 的 
人 数 ; 

。 Teacherno 字段 通过 教师 号 与 Teacher 表 相 关联 。 

通过 Teacher 表 可 以 知道 教师 的 名 字 和 职务 ,其 中 : 

。 Teacherno 字段 存放 教师 号 ; 

。 Name 字段 存放 教师 姓名 ; 

。 Title 字段 存放 教师 的 职务 。 

Course 表 以 Courseno 为 主键 。Teacher 表 以 Teacherno 为 主键 。 


4. 实验 的 操作 内 容 


1) 制作 功能 选择 界面 

制作 选课 系统 的 主 功能 选择 页 面 ,页 面 应 包括 选课 系统 标题 ,功能 菜单 ,动态 内 容 显 
示 部 分 (这 些 部 分 也 可 以 分 成 不 同 的 页 面 ,通过 主页 面 链接 在 一 起 ,但 记 住 页 面 类 型 都 要 
建成 动态 页 面 )。 

2) 实现 初步 的 课程 录入 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 

(2) 在 新 页 面 中 ,加 入 如 图 13-2 所 示 的 网 页 元 素 ; 添 加 一 个 表单 ,表单 包含 的 元 素 见 
表 13-1。 把 这 个 页 面 保 存 到 CourseSys 子 目 录 下 , 取 和 名 为 insertcourse. asp。 

(3) 添加 新 课程 信息 成 功 后 进入 的 成 功 信 息 提示 页 面 。 

(4) 利用 服务 器 行为 工具 实现 课程 录入 功能 。 

3) 控制 访问 级 别 

限制 课程 录入 功能 的 授权 级 别 , 只 有 教务 员 才 可 以 录入 新 的 课程 信息 。 

4) 改进 课程 录入 功能 

(1) 当 输 入 新 的 课程 信息 时 ,输入 教师 号 是 一 件 令 人 头痛 的 事 。 谁 能 记得 住 那么 多 
教师 号 呢 ? 请 改进 课程 录入 功能 .教务 员 可 以 直接 从 教师 名 单 里 选择 教师 ,保存 记录 时 用 
教师 号 。 
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文件 四 闹 椰 正 ) 查看 插入 CI) 医改 四 文本 加 命令 屯 ) 站 点 G) 宣 口中 帮助 加 
WR- 国 本 和 芋 [GETRTS] 握 豆 | 过 尼 加 咱 固 - 鸭 


ET 
les] 人 | 国 w+] 了 We FSSXa | 对 | CBS 人 
和 局 模式 【退出 1 
TO PPP PP PFO PPO EPR POR 1 PPO TPN PPD FPP PPR 芭 mn | 
| 输入 课程 信息 日 局 站 点 - 连 深 实验 Wy >ite) 
ee et 
了 开国 
3: CC 于 分 = [@ 分 国 FP 
E| 部 
量 
课程 名 称 : | 
了 良 程 挤 玉 a 


国 lm 
图 : 
0 


器 
> Keeble Cr Cuad CE G STUDY dhel> Civ rout te) NO A oor ~ em «301 3K71 和 
一 可 和 伍 Y) 陋 际 重大 ”动作 回扣 立 表 里 。。 口 无 [STYLE: 国 Qlessee 
ER 〇 于 汉 表单 上 TE 


图 13-2 课程 信息 输入 页 面 


表 13-1 表单 元 素 和 说 明 1 


元 素 类 型 属 性 值 说 明 
表单 名 字 : frmInsertCourse 本 表单 
i 名 字 : txtCourseno A 
文本 域 2 接受 课程 号 输入 的 文本 杠 
名 字 : txtName 
文本 域 字符 宽度 : 60 接受 课程 名 称 输入 的 文本 框 
类 型 : 单行 
名 字 : txtDescription 
文本 域 字符 宽度 : 80 接受 课程 描述 输入 的 文本 框 
类 型 : 多 行 
名 字 : selCredit 
类 型 : 菜单 
列表 值 : 一 分 。 1 
列表 /菜单 三 人 。 接受 学 分 输入 的 菜单 
四 分 4 
五 分 5 
初始 化 时 选 定 : 四 分 
名 字 : txtMaximumNum i 和 
文本 域 接受 最 大 选课 人 数 输 入 的 文本 框 
文本 域 3 na 接受 教师 号 输入 的 文本 框 
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续 表 


元 素 类 型 


属 性 值 


说 明 


名 字 : 
按钮 标签 : 
动作 : 


btnInsert 
保存 
提交 表单 


提交 课程 信息 的 按钮 


动作 


名字 
按钮 标签 : 


btnClear 


把 表单 内 容 清除 到 未 填 状 态 的 按钮 


: 重 置 表单 


(2) 教务 员 输 入 课程 号 时 ,万 一 课程 号 编制 错误 ,重复 了 会 怎么 样 ? 保存 信息 时 , 浏 
览 器 会 报 [ 服 务 器 内 部 错误 】, 这 会 很 让 人 莫名其妙, 最 好 的 做 法 是 在 保存 时 , 先 检查 作为 
主键 的 课程 号 是 不 是 已 经 存在 ,如 果 已 经 存在 就 显示 一 个 比较 友好 的 错误 信息 页 面 。 请 


读者 实现 这 一 功能 。 


5) 实现 课程 信息 修改 功能 

课程 信息 修改 功能 将 包含 两 个 主要 页 面 ,在 第 一 个 页 面 modifycourse. asp 中 让 用 户 
选择 要 修改 的 课程 号 ,并 单 击 【下 一 步 ] 按 钮 进入 第 二 个 页 面 。 在 第 二 个 页 面 
modifycoursel. asp, 让 用 户 修 改 该 课程 的 信息 并 保存 。 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 ,并 定义 一 个 记录 和 集 rstCourse 用 于 操 


作 课程 记 录 。 


(2) 在 新 页 面 中 ,加 入 如 图 13-3 所 示 的 基本 元 素 ; 添 加 一 个 表单 ,表单 包含 的 元 素 如 
表 13-2 所 示 。 把 这 个 页 面 保存 到 CourseSys 子 目 录 下 , 取 和 名 为 modifycourse. asp。 


DN Nacromedia Dreamwe: 


aver 8 - [E:\Iy site\Cour 


seSys\modifycourse. asp (XHTEL)] [区] 


文件 于) 编辑 下 ) 查看 WV) 插入 CI) 修改 电文 本 人 区) 命令 {C) 站 点 代 ) 窗口 YY) 帮助 0 


modifycourse, asp 


由 [ 辐 代码 | 号 拆 分 | 加 设计 | 区 标 是 : 
9 0 060 0 到 


芭 


下 皮卡 @|c 固 巴 | 


一 
Cbody> Ctable> Ctr> <td> Cform#forml> p> abel>[Cinput#btnNext) NR] A lo0% ~v|728 x 264v 2K/1 秒 | 
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表 13-2 表单 元 素 和 说 明 2 
元 素 类 型 属 性 值 说 明 


表单 名 字 : frmModifyCourse 本 表单 


名 字 : selCourseno 
类 型 : 菜单 

列表 值 : 动态 
列表 /菜单 来 自 : rstCourse edd 
值 字段 : Courseno 

标签 字段 : Courseno 

初始 化 时 选 定 : rstCourse 的 [第 一 个 记录 索引 ] 


名 字 : btnNext 
按钮 标签 : 下 一 步 提交 课程 信息 的 按钮 
动作 : 提交 表单 


(3) 创建 第 二 个 页 面 ,保存 为 modifycoursel. asp。 定 义 〖 请 求 变量 3 用 于 接收 第 一 
页 面 通过 提交 表单 传递 过 来 的 参数 。 

(4) 定义 仅 包含 要 修改 的 那 条 课程 记录 的 记录 集 , 用 于 修改 操作 。 

(5) 在 modifycoursel. asp 页 面 中 ,加 入 如 图 13-4 所 示 的 基本 元 素 ;添加 一 个 表单 ， 
表单 包含 的 元 素 如 表 13-3 所 示 。 


er 8 - [E:VEHy site\CourseSys\modifycoursel.asp (XHTEL)#] Ce 区 


WI 2 国 识 计 ][ 散 标题 大 标 题 广 冰 ere 
2 者 忆 村 式 - TH 


图 13-4 ”课程 信息 修改 页 面 


(6) 利用 服务 器 行为 工具 实现 课程 信息 修改 功能 。 
(7) 设置 表单 的 提交 动作 参数 ,实现 表单 元 素 值 的 传递 ,真正 把 两 个 页 面 的 功能 衔接 
起 来 。 
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表 13-3 ”表单 元 素 和 说 明 3 


元 素 类 型 属 性 值 说 明 
表单 名 字 : frmModifyCourse 本 表单 

名 字 : txtName 

字符 宽度 : 60 ee 
文本 域 类 型 : 单行 接受 课程 名 称 输入 的 文本 框 


初始 值 : 来 自 rstCourse. Name 


名 字 : txtDescription 

字符 宽度 : 80 

类 型 : 多 行 

初始 值 : 来 自 rstCourse. Description 


文本 域 受 课程 描述 输入 的 文本 框 


名 字 : selCredit 
类 型 : 菜单 
列表 值 : 动态 
静态 选项 : 

一 分 1 
列表 /菜单 二 分 2 接受 学 分 输入 的 菜单 

至 状 3 

四 分 4 

五 分 
来 自 记 录 集 : 无 
选取 值 等 于 : 来 自 rstCourse. Credit 


名 字 : txtMaximumNum 
文本 域 类 型 : 单行 接受 最 大 选课 人 数 输入 的 文本 框 
初始 值 : 来 自 rstCourse. MaximumNum 


名 字 : selTeacherno 

类 型 : 菜单 

列表 值 : 动态 

静态 选项 : 无 

来 自 记录 集 : rstTeacher 

值 来 自 字 段 : Teacherno 

标签 来 自 字 段 : Name 

选取 值 等 于 : 来 自 rstCourse. Teacherno 


列表 /菜单 接受 教师 号 输入 的 文本 框 


名 字 : btnSave 
按钮 标签 : 保存 提交 课程 信息 的 按钮 
动作 : 提交 表单 


名 字 : btnReset 
按钮 标签 : 还 原 重 改 把 表单 内 容 清 除 到 未 填 状 态 的 按钮 
动作 : 重 置 表 单 


(8) 课程 修改 页 面 ,也 只 有 教务 员 可 以 访问 ,限制 用 户 访 问 级 别 。 

6) 实现 初步 的 课程 信息 查询 功能 

为 用 户 提 供 一 个 简单 的 课程 查询 功能 .把 现 有 的 所 有 课程 以 列表 的 形式 显示 给 用 户 。 
(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 定 义 一 个 用 于 课程 信息 查询 的 记录 
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集 rstCourse。 
(2) 在 新 页 面 中 ,如 图 13-5 所 示 布 局 页 面 元 素 , 利 用 服务 器 行为 工具 实现 课程 信息 
查询 功能 。 


读 杠 凌 课程 名 称 - a 学 分 一 


图 13-5 ”课程 信息 查询 页 面 


7) 实现 多 页 式 的 课程 信息 查询 功能 

刚才 完成 的 查询 页 面 显示 了 所 有 的 记录 ,如 果 课 程 信息 很 多 的 话 , 这 一 页 将 会 很 长 ， 
通过 网 络 传送 这 一 页 的 时 间 会 较 长 ,用 户 浏览 起 来 也 会 比较 吃力 。 接 下 来 将 把 查询 页 面 
改造 成 分 页 显示 的 形式 。 

(1) 利用 服务 器 行为 工具 实现 课程 信息 查询 结果 的 分 页 。 

(2) 给 分 页 页 面 配 备 相 应 的 导航 条 ,提供 【第 一 页 前 一 页 了 后 一 页 和 【最 后 一 
页 3 的 跳 转 。 

(3) 使 导航 条 的 内 容 根 据 当 前 页 的 位 置 调整 ,不 适用 的 导航 链接 就 不 显示 。 


5. 实验 的 参考 步骤 


1) 制作 功能 选择 界面 

完成 本 题 的 操作 步骤 如 下 。 

@ 打开 main. asp。 

@ 选择 主 菜单 中 的 【插入 了 区 框 架 了 上 方 及 左 侧 嵌 套 ] 了 命令,Dreamweaver 8 在 生成 
框架 的 同时 ,自动 把 main. asp 置 为 框架 的 主页 面 。 

@) 在 上 方 框架 中 输入 标题 信息 如 【校园 网 选课 系统 了 .当然 读者 可 以 自由 发 挥 ,生成 
一 个 漂亮 的 标题 页 面 。 

@ 将 上 方 页 面 保存 为 CourseSys\title. asp: 左 侧 页 面 保存 为 CourseSys\menu. asp， 
将 整个 框架 页 面 保 存 为 CourseSys\mainmenu. asp。 

@ 在 左 侧 框架 中 添加 网 站 功能 的 菜单 按钮 .并 正确 的 设置 超级 链接 。 

@O 不 要 忘 了 修改 CourseSys\index. asp 用 户 登 录 页 面 : 把 其 中 的 【登录 用 户 了 的 服务 
器 行为 中 登录 成 功 后 转向 的 页 面 指 向 CourseSys\mainmenu. asp。 
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注意 : 

本 例 选用 了 框架 来 实现 选课 系统 的 主 菜单 ,也 可 以 选择 别 的 方法 。 页 面 存 成 .asp 还 
是 .htm, 取 决 于 是 否 希 望 在 该 页 面 利 用 或 处 理 动态 信息 .建议 对 于 Web 应 用 程序 的 所 有 
页 面 统一 采用 .asp 动态 页 面 格式 ,以 便 随 时 增加 动态 内 容 。 

图 13-6 显示 了 修改 后 的 选课 系统 功能 选择 界面 。 


乌 无 标题 文档 - 本 icrosoft Internet Exzplorer 
文件 到 ) ”编辑 巴 查看 GD 收 读 和 ) 工具 TI) 帮助 0D 


Ee- 日 国 国 多 记过 区 ex 天 | 辐 - 丢 国 浊 


地 址 男 ) | 息 http://10. 10.1.2/CourseSys/nainnenu asp 


图 13-6 ”选课 系统 的 主 菜单 


2) 实现 初步 的 课程 录入 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 在 新 页 面 中 ,加 入 如 题 意 要 求 的 基本 
元 素 和 表单 。 把 这 个 页 面 保存 到 CourseSys 子 目 录 下 , 取 名 为 insertcourse. asp。 

完成 本 题 的 操作 步骤 如 下 。 

JD 选择 主 菜单 中 的 [文件 3IK 新 建 3 命 令 ,弹出 【新 建文 档 ] 对 话 框 。 

@ 创建 动态 页 面 , 在 类 别 框 中 选择 【动态 页 .在 动态 页 类 型 选项 中 ,选择 【ASP 
VBScript], 单 击 【 创 建 ] 按 钮 ,创建 一 个 新 的 支持 VBScript 语言 的 ASP 技术 的 无 标题 
文档 。 

G@) 数据 库 链 接 CourseSys 可 以 直接 使 用 ,不 需要 再 创建 。 

@ 按照 题 意 添加 元 素 和 表单 ,具体 步骤 略 。 

@ 对 课程 信息 输入 页 面 先 创建 到 这 里 ,其 功能 先 暂 缓 实现 ,选择 主 菜单 中 的 [文件 4 
【保存 3 命令 .把 这 个 页 面 保存 到 CourseSys 子 目 录 下 . 取 名 为 insertcourse. asp。 

(2) 添加 新 课程 信息 成 功 后 进入 的 成 功 信 息 提 示 页 面 。 为 此 ,创建 一 个 如 图 13-7 所 
示 的 成 功 信息 页 面 ,并 添加 阶段 变量 ,将 文件 保存 为 CourseSys\insertsuccess. asp。 

(3) 利用 服务 器 行为 工具 实现 课程 录入 功能 。 

完成 本 题 的 操作 步骤 如 下 。 

GO 回 到 课程 信息 输入 页 面 的 编辑 窗口 :如果 您 已 经 关闭 该 窗口 ,那么 请 重新 打开 该 
这 入 

@ 在 【应 用 程序 】 浮 动 面板 中 ,选择 【服务 器 行为 选项 卡 , 单 击败 按钮 .会 出 现 如 
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图 13-8 所 示 的 菜单 ,选择 [插入 记录 ] 命 令 。 


司 Nacromedia Dreanweaver 8 — [C:\Wy Site\Cour 


图 13-7 信息 输入 成 功 提示 


《XHTML)] 


图 13-8 插入 记录 菜单 示意 图 


@) 接 下 来 会 弹出 如 图 13-9 所 示 的 对 话 框 。 
。 在 【连接 下拉 列 表 框 中 ,选择 CourseSys 数据 库 连 接 。 
。 在 【插入 到 表格 J 下 拉 列 表 框 中 选择 dbo. Course 表 . 表 示 输 入 的 数据 将 插入 该 表 


中 去 。 
。 在 【插入 后 . 转 到 ] 文 本 框 中 输入 成 功 信息 页 面 的 路 径 . 也 可 以 单 击 【 浏 览 ] 按 钮 直 
接 从 本 地 站 点 选择 。 


@ 接 下 来 的 对 话 框 部 分 指定 了 表单 元 素 值 与 数据 库 记 录 字 段 的 对 应 关系 。 
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:| CourseSys 


:| dbo. Course 


[insertsuccess. asp 


: | frmInsertCourse 器 


Ee xtCourseno 揪 入 光 | 列 中 "Course” (这 本 】 
9 人 Credit” (数字 ) 
txth: Fame” 
nr 

TT 

人 中 


图 13-9 【插入 记录 3 对话 框 


。 在 【获取 值 自 了 下 拉 列 表 框 中 选择 frmInsertCourse 表单 ,表示 新 记录 的 值 来 自 该 
表单 中 的 元 素 值 。 
。 在 【表单 元 素 ] 中 选择 txtCourseno ,然后 在 下 面 的 【 列 了 下 拉 列 表 框 中 选择 dbo. 
Course 表 中 的 Courseno 字段 ,然后 在 【提交 为 耻 F 拉 列表 框 中 选择 【文本 了 ,表示 搬 
入 dbo. Course 表 的 新 记录 ,其 Courseno 字段 的 值 来 自 frmInsertCourse 表单 中 
的 txtCourseno 的 输入 值 ,并 且 将 该 值 按照 文本 类 型 来 理解 。 
。 用 同样 的 方法 将 【表单 元 素 了 列表 框 中 的 所 有 的 表单 元 素 对 应 到 其 对 应 的 字段 。 
@ 单 击 【确定 了 完成 对 话 框 的 设置 , 回 到 
Dreamweaver 8 主 夯 面 后 ,可 以 看 到 【应 用 程 
序 了 浮动 面板 的 【服务 器 行为 3 选项 卡 中 多 了 [ 搬 | 
和 记录 这 一 行为 ,如 图 13-10 所 示 。 团 | 二 | 文 拉 型 ;Asp wseript 
插入 记录 (表单 “frmInsertCourse") 
@ 课程 信息 输入 页 面 的 基本 功能 已 经 完 | 
成 了 , 别 忘 了 保存 ,当然 还 要 在 功能 页 面 中 更 新 图 13-10 ”显示 插入 记录 行为 
指向 课程 信息 输入 页 面 的 超级 链接 ( 别 忘 了 插 
入 链接 时 把 目标 指定 为 mainFrame, 以 使 页 面 在 主 框架 中 显示 )。 
实验 效果 : 
同步 站 点 之 后 ,就 可 以 测试 一 下 功能 了 。 在 功能 页 面 中 左 侧 选择 【输入 课程 信息 1】, 在 
主 框架 中 应 该 打开 如 图 13-11 所 示 的 画面 。 
图 13-11 中 ,输入 填 人 信息 后 : 单 击 【保存 信息 3 按钮 ,将 显示 如 图 13-12 所 示 的 输入 
成 功 的 提示 信息 页 面 。 
3) 控制 访问 级 别 
限制 课程 录入 功能 的 授权 级 别 ,只 有 教务 员 才 可 以 录入 新 的 课程 信息 。 
读者 一 定 已 经 注意 到 ,对 于 课程 输入 页 面 还 没有 做 用 户 权 限 的 限定 ,任何 一 个 正确 登 
录 的 用 户 都 可 以 输入 和 保存 课程 信息 。 以 下 是 实现 用 户 权 限 限 制 的 方法 。 
完成 本 题 的 操作 步骤 如 下 。 
@ 打开 课程 输入 页 面 insertcourse. asp; 在 〖 应 用 程序 浮动 面板 的 【服务器 行为 】 选 
项 卡 中 ,选择 添加 菜单 的 K〖 用 户 身份 验证 3IK 限 制 对 页 的 访问 命令。 
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当 无 标题 文档 一 于 icrosoft Internet Explorer 
文件 下) 久 查 下) 查看 WD 收藏 和 工具 QD 帮助 op 


输入 课程 信息 


课程 号 : 学 分 : 


课程 名称: | 管 国文 学 史 一 一 从 起 源 到 当代 


课程 描述 : 
短 国 语言 文学 类 


最 大 选课 和 人数 : [20 


图 13-11 输入 课程 信息 页 面 示意 图 


当 无 标题 文档 一 icrosoft Internet Explorer 
文件 于 蝙 辑 @) 查看 也 收 语 W) 工具 了 玫 助 09 


昌 提 -~- 曲 - 国 国 肉 记 扫 要 去 收 V& 天 名 | 由- 蕊 国 入 


共 坦 您 ! 
TECN 。 


新 输入 的 课程 已 经 保存 ! 


图 13-12 课程 信息 输入 成 功 提 示 
@ 接 下 来 将 看 到 如 图 13-13 所 示 的 对 话 框 , 在 【基于 以 下 内 容 进行 限制 3 单 选 按钮 组 
中 ,这 一 次 应 该 选择 【用 户 名 、 密 码 和 访问 级 别 了 ,因为 对 这 个 页 面 , 只 有 访问 级 别 是 教务 员 


限制 对 页 的 访问 


基于 以 下 内 容 进行 限制 : 〇 ”用 户 名 和 密码 
回 用户 和 名、 密码 和 访问 级 别 


选 职级 别 : 


lillegal. asp 


图 13-13 【限制 对 页 的 访问 〗 对 话 框 


实验 名 输入 修改 和 查询 系统 的 实验 167 


的 用 户 才 能 够 访问 ,所 以 控制 权限 到 密码 一 级 还 不 够 .要 控制 到 授权 级 别 一 级 。 

@@ 在 【如 果 访 问 被 拒绝 , 则 转 到 】 文 本 框 中 输入 访问 拒绝 时 ,进入 哪个 页 面 ,可 以 单 击 
【浏览 3 按钮 直接 在 本 地 站 点 选取 页 面 ,这 里 选 
择 的 是 登录 失败 信息 页 面 ; 按 【定义 了 进入 访问 
级 别 设置 。 

@ 这 时 将 看 到 如 图 13-14 所 示 的 对 话 框 ， teacher 
在 〖 名 称 ] 文 本 框 中 输入 访问 级 别 的 名 称 , 这 个 
名 称 应 该 与 账户 表 中 使 用 的 访问 级 别 一 致 , 单 
击 恒 | 按钮 ,把 该 访问 级 别 加 入 限制 列表 。 

注意 : 

这 里 定义 的 访问 级 别 , 在 别 的 页 面 上 也 可 以 引用 ,不 必 重 复 定义 。 

@ 单 击 【确定 了 按钮 后 ,可 以 发 现 【 选 取 级 别 了 列表 框 中 出 现 了 刚才 定义 的 访问 级 别 限 
制 列表 ,如 图 13-15 所 示 。 


访问 晤 别 : 还 | 三 | 


student 


: 


图 13-14 定义 访问 级 别 


限制 对 页 的 访问 


基于 以 下 内 容 进行 限制 : O 〇 ”用 户 名 和 密码 
加 ”用 户 名 、 密 码 和 访问 级 别 


tudent 
选 职级 别 : 
teacher 


如 果 访问 被 拒绝 ， 则 转 到 ; [illezal asp 


图 13-15 【限制 对 页 的 访问 3] 对 话 框 


@@ 单 击 【 确 定 ] 按 钮 完成 行为 定义 。 这 时 ,服务 器 行为 变 成 如 图 13-16 所 示 的 样子 。 


二 | 一 | 文档 类 型 : ASP VBscript 
CE (admin) 


frmInsertCourse” ) 


图 13-16 【限制 对 页 的 访问 了 服务 器 行为 


实验 效果 : 

同步 站 点 之 后 ,测试 一 下 ,会 发 现 这 一 次 :无论 用 学 生 账 户 或 者 教师 账户 登录 后 , 当 试 
图 访问 课程 信息 输入 页 面 时 ,将 打开 如 图 13-17 所 示 的 画面 。 

注意 : 

当 使 用 [限制 对 页 的 访问 了 服务 器 行为 来 控制 用 户 访问 权限 时 ,特别 要 注意 在 用 户 账 
人 否则 .该 服务 器 行 
为 会 认为 访问 级 别 不 符 , 而 拒绝 有 权限 的 用 户 的 访问 ,这 是 初学 者 容易 犯 的 一 个 常见 
问题 。 
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要 无 标题 文档 - 了 crosol ft Internet Explorer 
文件 EE 编辑 E) 查看 WD 收藏 和 工具 加 帮助 四 


"日" 国 国 铂 | 记 扫 才 去 收 V& 天 全 | 合 - 吾 国防 


图 13-17 非 管理 员 用 户 不 能 输入 课程 信息 


注意 : 

如 果 读 者 发 现 连 管理 员 账 号 也 不 能 访问 该 页 面 , 请 查 教材 中 相对 应 章节 中 有 关 处 理 
多 余 空 格 的 技巧 提示 ,看 如 何 通过 直接 修改 页 面 代码 解决 这 个 问题 。 

4) 改进 课程 录入 功能 

(1) 当 输 入 新 的 课程 信息 时 ,输入 教师 号 是 一 件 令 人 头痛 的 事 。 谁 能 记得 住 那 么 多 
教师 号 呢 ? 请 改进 课程 录入 功能 ,教务 员 可 以 直接 从 教师 名 单 里 选择 教师 ,保存 记录 时 用 
教师 号 。 

完成 本 题 的 操作 步骤 如 下 。 

Q@ 首先 在 课程 信息 输入 页 面 insertcourse. asp 中 ,创建 一 个 从 Teacher 表 中 取 值 的 
记录 集 , 如 图 13-18 所 示 ,因为 仅 需要 用 到 该 表 中 的 两 个 字段 的 内 容 , 因 此 在 对 话 框 中 仅 
选择 了 这 两 个 字段 名 ;另外 ,考虑 到 显示 在 下 拉 列 表 框 中 的 教师 名 按 序 查 找 起 来 方便 一 
些 , 因 此 【排序 下 拉 列 表 框 中 选择 了 Name 字段 ,表示 记录 集中 的 记录 将 以 Name 字段 的 
内 容 排序 。 


:stTeacher 


E 接 : |Cour seSys 


:| dbo. Teacher 


图 13-18 记录 集 对 话 框 
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@) 删 去 网 页 insertcourse. asp 中 名 为 教师 号 的 文本 字段 的 表单 元 素 txtTeacherno， 
而 代 之 以 列表 /菜单 的 表单 元 素 selTeacherno ,选择 该 元 素 . 并 在 【属性 了 浮动 面板 中 : 单 击 
[到 过 j 掖 钮 ,使 得 selTeacherno 显示 的 列表 来 自动 态 的 数据 源 。 

@@ 在 如 图 13-19 所 示 的 对 话 框 里 的 参数 可 按 如 下 方法 设置 : 


动态 列表 /菜单 


: | "selTeacherno” 在 表单 “frmIn' 贺 


a | 到 加] 
值 标签 


rstTeacher E | 


:|Teacherno bd 
rw 上 3 
和 ”xx | 


图 13-19 【动态 列表 /菜单 3 对 话 框 


。【 菜 单 了 下拉 列 表 框 中 的 参数 不 必修 改 。 

。 在 来自 记 录 集 的 选项 下 拉 列 表 框 中 ,选择 rstTeacher 记录 集 . 表 示 标 签 和 值 的 
列表 对 来 自 该 记录 和 集 。 

。 在 【 值 3 下 拉 列 表 框 中 ,选择 Teacherno 字段 ,表示 标签 和 值 的 列表 对 的 值 项 , 取 自 
该 字段 。 

。 在 【标签 I 下拉 列表 框 中 ,选择 Name 字段 .表示 标签 和 值 的 列表 对 的 标签 项 , 取 自 
该 字段 。 

@ 单 击 国 按钮 后 .在 如 图 13-20 所 示 的 对 话 框 中 选择 显示 selTeacherno 菜单 元 素 

时 ,selTeacherno 默认 选中 的 菜单 项 。 


中 | 日 转 记录 集 CstTeacher) 
多。 Teacherno 
Hame 
[第 一 个 记录 索引 ] 
多 [最 后 一 个 记录 索引 ] 
多 [全 部 记录 ] 
阶段 


MUsernane 


:| 无 


|= (rstTeacher_first)%> 


图 13-20 【动态 数据 3 对 话 框 
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@ 单 击 【确定 3 按钮 完成 设置 。 记 住 还 要 更 新 【插入 记录 】 服 务 器 行为 .因为 代表 教师 
号 的 表单 元 素 变 了 。 

这 样 教务 员 就 不 用 担心 记 不 住 教师 号 或 者 输 错 教师 号 了 。 

实验 效果 : 

测试 画面 如 图 13-21 所 示 。 


最 大 选课 人 数 : 


图 13-21 输入 课程 信息 页 面 


(2) 教务 员 输 入 课程 号 时 ,万 一 课程 号 编制 错误 ,重复 了 会 怎么 样 ? 保存 信息 时 , 浏 
览 器 会 报 【〖 服 务 器 内 部 错误 】 ,这 会 很 让 人 英名 其 妙 ,最 好 的 做 法 是 在 保存 时 , 先 检查 作为 
主键 的 课程 号 是 不 是 已 经 存在 .如 果 已 经 存在 就 显示 一 个 比较 友好 的 错误 信息 页 面 。 请 
读者 实现 这 一 功能 。 

完成 本 题 的 操作 步骤 如 下 。 

@ 创建 一 个 错误 信息 页 面 : 如 图 13-22 所 示 ,保存 为 CourseSys\courseexit. asp。 


xit- asp (XHTEL)] 


文件 加 CD 查看 WW 插入 CD) 修改 如 文本 并 ) 站 点 窗口 QD 帮助 0 | 
布局 了 国 国 舟 [ 术 e [扩展 | 汕 局 | 全 于 | 全 ”本 E 


请 检查 输入 的 数据 是 否 有 误 ， ! 


图 13-22 输入 错误 提示 
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@ 在 课程 信息 输入 页 面 insertcourse. asp 中 : 单 击 【 应 用 程序 浮动 面 板 的 【服务 器 行 
为 3 选项 卡 中 选择 添加 菜单 的 [用 户 身份 验证 3I【 检 查 新 用 户 名 命令。 

@ 接 下 来 将 看 到 如 图 13-23 所 示 的 对 话 框 ,在 【用 户 名 字段 了 下拉 列表 框 中 ,选择 
txtCourseno。 在 【如 果 已 存在 , 则 转 到 文本 框 中 输入 错误 信息 页 面 的 路 径 , 也 可 以 单 击 
【浏览 了 按钮 直接 在 本 地 站 点 选取 页 面 。 


txtCourseno 


courseexit. asp 


图 13-23 【检查 新 用 户 名 对话 框 


@ 单 击 【确定 了 按钮 完成 设置 。 

注意 : 

如 果 读 者 觉得 很 奇怪 ,检查 课程 号 是 否 存在 , 跟 检 查 新 用 户 名 有 什么 关系 ? 那么 说 明 
读者 没有 仔细 看 配套 教材 中 的 讲解 ,请 复习 相关 的 内 容 。 其 实 这 里 用 了 一 个 小 技巧 ,服务 
器 行为 【检查 新 用 户 名 原本 用 于 检查 新 注册 的 用 户 名 是 否 已 存在 ,这 里 用 它 来 实现 检查 
新 输入 的 课程 号 是 否 已 存在 的 功能 。 

实验 效果 : 

可 以 自己 测试 一 下 效果 ,有 意 输入 一 个 已 经 存在 的 课程 号 ,保存 时 会 出 现 错误 信息 。 
到 现在 为 止 ,课程 信息 输入 页 面 一 共有 和 多少 个 
服务 器 行为 了 ?” 如 图 13-24 所 示 。 

5) 实现 课程 信息 修改 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 


限 币 对 页 的 沪 癌 (inin) 

i 检查 新 用 户 名 

页 面 ,并 定义 一 个 记录 和 集 rstCourse 用 于 操作 记录 集 stTeacher) 
录 (表单 “frmInsertCourse") 


es 插入 记 : 
课程 记录 。 动态 列表 /菜单 (selTeacherno) 


(2) 在 新 页 面 中 ,加 入 题 意 要 求 的 基本 元 
素 和 表单 。 把 这 个 页 面 保 存 到 CourseSys 子 
目录 下 , 取 名 为 modifycourse. asp。 

完成 本 题 的 操作 步骤 如 下 。 

@ 选择 主 菜单 中 的 [文件 3IK 新 建 3 命 令 ,弹出 【新 建文 档 了 的 对 话 框 。 

@ 创建 一 个 动态 页 面 , 在 类 别 框 中 选择 [动态 页 】 .在 右边 出 现 的 动态 页 类 型 选项 中 ， 
选择 [FASP VBScript】, 单 击 【 创 建 3 按 钮 ,这 样 就 会 创建 一 个 新 的 支持 采用 VBScript 语言 
的 ASP 技术 的 无 标题 文档 。 

@@ 数据 库 链 接 CourseSys 可 以 直接 使 用 .不 需要 再 创建 。 

定义 一 个 记录 集 rstCourse。 如 图 13-25 所 示 。 

@ 按照 题 意 添加 元 素 和 表单 ,具体 步骤 略 。 

@ 对 课程 信息 修改 页 面 先 创建 到 这 里 ,其 功能 先 暂 缓 实现 .选择 主 菜单 中 的 [文件 站 
【保存 3 命令 .把 这 个 页 面 保存 到 CourseSys 子 目录 下 . 取 和 名 为 modifycourse. asp。 


图 13-24 服务 器 行为 示意 图 
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: EstCourse 


下 coursesys 


3 |abo. Course 


图 13-25 【记录 和 集 】 对 话 框 


(3) 创建 第 二 个 页 面 ,保存 为 modifycoursel. asp。 定 义 〖 请 求 变 量 3 用 于 接收 第 一 页 
通过 提交 表单 传递 过 来 的 参数 。 

完成 本 题 的 操作 步骤 如 下 。 

Oa 创建 modifycoursel. asp。 

G@) 接 下 来 定义 从 第 一 页 传 过 来 的 参数 ,在 【应 用 程序 3 浮动 面板 中 ,选择 【 绑 定 了 选项 
卡 , 单 击 铺 记 按 钮 ,选择 [请 求 变 量 】 .此 时 会 弹出 如 
图 13-26 所 示 的 对 话 框 ;在 【类 型 3 下 拉 列 表 框 中 
选择 Request. Form ,表示 该 请 求 变量 来 自 调用 本 名 称 : 
页 的 那个 页 中 提交 的 表单 ;在 【名 称 ] 文 本 框 中 输 
人 表单 元 素 名 ,这 里 输入 的 是 第 一 页 中 
frmModifyCourse 表单 的 SelCourseno 菜单 ,表示 
该 请 求 变 量 的 值 来 自 这 个 表单 元 素 。 

(4) 定义 仅 包含 要 修改 的 那 条 课程 记录 的 记录 集 . 用 于 修改 操作 。 完 成 本 题 的 操作 
步骤 如 下 。 

J 定义 一 个 记录 集 rstCourse, 这 个 记录 集 代 表 要 修改 的 那 条 课程 记录 ,因此 必须 限 
定 条 件 ,定义 时 的 选项 如 图 13-27 所 示 。 


请 求 变量 


GelCourseno 


图 13-26 【请 求 变 量 了 对 话 框 


SrstCcourse 


3 |CourseSys 


| tb。 Course 


图 13-27 【记录 集 】 对 话 框 
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@ 与 以 前 不 同 的 地 方 是 .这 一 次 定义 了 筛选 条 件 . 在 【筛选 J 下 拉 列 表 框 中 ,选择 
Courseno, 这 是 条 件 表达 式 的 左 半 部 ,在 右边 的 条 件 运 算 符 下 拉 列 表 框 中 选择 “= 二”, 在 左 
下 方 的 值 来 源 下 拉 列 表 框 中 选择 【表单 变量 】 .表示 条 件 表达 式 的 右 半 部 来 自 表 单 变量 ,也 
就 是 类 型 为 Request. Form 的 请 求 变 量 。 

@ 在 该 下 拉 列 表 框 右边 的 文本 框 中 输入 刚 定 义 好 的 那个 请 求 变量 selCourseno。 

@ 单 击 【 确 定 3 按 钮 完成 记录 和 集 定 义 。 

(5) 按照 题 意 对 网 页 modifycoursel. asp 布局 页 面 元 素 和 表单 元 素 。 这 个 表单 中 的 
动态 元 素 较 多 ,因此 下 面 将 详细 叙述 这 些 动态 元 素 的 设置 方法 。 

完成 本 题 的 操作 步骤 如 下 。 

@D 按照 题 意 添加 如 图 13-4 所 示 的 元 素 和 表单 .具体 步骤 略 。 

@ 对 于 文本 域 , 通 过 选中 文本 域 ,在 【属性 3 浮动 面板 中 单 击 【5 初 始 值 】 文 本 框 边 上 的 
闪电 符号 ,可 以 选择 【应 用 程序 3 浮动 面板 中 的 【 绑 定 3 选 项 卡 里 已 经 定义 好 的 动态 值 作 为 
初始 值 。 

例如 : txtDescription 的 初始 值 设 置 对 话 框 如 图 13-28 所 示 。 


:| 日 转 记录 集 CstCourse) 


Courseno 


Credit 

Maxcimumnom 

Teacherno 

[第 一 个 记录 索引 ] 

[最 后 一 个 记录 索引 :- 
多 [全 部 记录 ] 


:| 人 = GstCourse. Fields. Item ("Descr: 


图 13-28 【动态 数据 3 对话 框 


。 直接 在 【 域 3 选 择 框 中 选择 动态 数据 项 即 可 ,可 以 选择 记录 集 的 字段 值 . 阶 段 变量 、 
应 用 变量 .请 求 变 量 等 ,只 要 已 经 在 【 绑 定 3 选项 卡 里 已 经 定义 好 ,就 可 以 在 此 处 
选择 。 

。“【 格 式 3 下 拉 列 表 框 中 可 以 选择 动态 数据 的 显示 格式 ,比如 按 日 期 显示 、 按 货币 显 
示 等 ,不 选 的 话 就 按 数 据 本 身 的 格式 显示 。 

。*。【 代 码 ] 文 本 框 中 不 必 输 入 .在 【 域 】 选 项 中 选 定数 据 项 后 ,会 在 【代码 框 中 自动 生 
成 相应 的 代码 。 

@@ 对 于 列表 /菜单 元 素 . 可 以 通过 选中 该 元 素 .在 【属性 3 浮动 面板 单 击 带 闪电 符号 的 
按钮 区 动态 .来 设置 动态 数据 ;selCredit 和 selTeacherno 的 设置 略 有 不 同 , 显 示 了 
动态 菜单 的 不 同 应 用 , 接 下 来 分 别 说 明 。 

@ selCredit 的 动态 数据 设置 如 图 13-29 所 示 。 

菜单 的 选项 取 自 两 种 选择 : 静态 选项 和 来 自 记录 和 集 的 动态 选项 ,可 以 从 静态 中 选 , 也 
可 以 从 记录 集中 选 或 者 从 两 者 中 都 选 ;selCredit 的 菜单 选项 来 自 静 态 定义 的 选项 ;在 【 选 
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动态 列表 / 荣 单 


:|“selCcredit” 在 表单 “frnllodif: 国 


ll 到 [Ea 
值 


: [C= CstCourse Fields. Item ("Cr 


图 13-29 【动态 列表 /菜单 3 对 话 框 


取 值 等 于 ] 文 本 框 中 输入 初始 时 选择 的 那个 菜单 的 值 ,实际 上 可 以 单 击 右边 的 闪电 符号 进 
入 如 图 13-30 所 示 的 对 话 框 直接 选择 初始 值 来 自 哪个 动态 数据 。 


日 鲍 记录 集 cstcourse) 国 | 
Courseno | 
Hame 
Description 


aximumnum 
Teacherno 
[第 一 个 记录 索引 ] 
[最 后 一 个 记录 索引 - 
[全 部 记录 ] 

田 印 记录 集 (rstTeacheer) 国 

Em | 


引 无 闻 


|= GstCourse. Fields. Item (“Credi 


图 13-30 【动态 数据 3 对话 框 
@) selTeacherno 的 动态 数据 设置 如 图 13-31 所 示 。 


动态 列表 /菜单 


菜单 : | "selTeacherno” 在 表单 “frmllo, v | 
青帮 选项 : 土 | 一 | 全 | =| 


rstTeacher 


:|Teacherno 


: [Name 


N= (rstCourse. Fields. Ttem ("TI 


图 13-31 【动态 列表 /菜单 了 对话 框 
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selTeacherno 的 菜单 选项 来 自 rstTeacher: 其 中 显示 的 菜单 标签 的 内 容 来 自 
rstTeacher. Name 字段 ,菜单 标签 对 应 的 值 来 自 rstTeacher. Teacherno; 初始 值 来 自 
rstCourse. Teacherno, 设 置 方法 与 selCredit 中 的 方法 一 样 . 不 再 效 述 。 

@ 所 有 的 动态 表单 元 素 都 对 应 一 个 服务 器 行为 .可 以 在 【服务 器 行为 了 选项 卡 中 找 
到 ,如 图 13-32 所 示 。 


二 | 一 | 文档 类 型 ，ASP VBscript 
记录 集 (rstCourse) 
记录 集 (rstTeacheer) 
动态 属性 (txtcourseno. value，Request. 了 orm. SelCourseno) 
动态 列表 /菜单 (selCredit) 
动态 文本 域 (txtHame) 
动态 文本 域 (txtDescription) 
动态 文本 域 (txtNaximunNum) 
事态 列表 /菜单 (seiTeacherno) ] 


图 13-32 动态 表单 元 素 的 服务 器 行为 


(6) 利用 服务 器 行为 工具 实现 课程 信息 修改 功能 。 
完成 本 题 的 操作 步骤 如 下 。 
@O 生成 如 图 13-33 所 示 的 “课程 信息 修改 已 经 成 功 ” 信 息 提 示 页 面 , 并 将 其 保存 为 


CourseSys\modifycourseok. asp。 


图 13-33 课程 信息 修改 成 功 提示 


@ 在 网 页 modifycoursel. asp 中 : 单 击 【 应 用 程序 3 浮动 面板 .并 选择 【服务 器 行为 】 选 
项 卡 , 单 击 市 按钮 ,选择 【更 新 记录 命令 。 

@【 更 新 记录 了 服务 器 行为 的 参数 设置 如 图 13-34 所 示 。 

。 在 【连接 下 拉 列 表 框 中 .选择 CourseSys 数据 库 连 接 。 

。 在 【要 更 新 的 表格 了 下 拉 列 表 框 中 选择 dbo. Course 表 .表示 输入 的 数据 将 用 于 更 
新 该 表 的 数据 。 

。 在 【选取 记录 自 了 下 拉 列 表 框 中 选择 rstCourse 记录 集 , 由 该 记录 和 集 来 限定 要 更 新 
的 记录 的 范围 。 
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:|coursesys 


eok. asp 


frmllodi fyCourse 


列 : [Nne 羡 | 提交 为 - 


图 13-34 【更 新 记录 对话 框 


。 在 【唯一 键 列 了 下 拉 列 表 框 中 选择 Courseno, 来 标识 数据 库 表格 中 的 记录 。 

。 在 【在 更 新 后 , 转 到 文本 框 中 输入 成 功 信息 页 面 的 路 径 , 也 可 以 单 击 【 浏 览 ] 按 钮 

直接 从 本 地 站 点 选择 。 

@ 接 下 来 的 对 话 框 部 分 指定 了 表单 元 素 值 与 数据 库 记 录 字 段 的 对 应 关系 ;在 【获取 
值 自 了 下 拉 列 表 框 中 选择 frmModifyCourse 表单 ,表示 记录 的 新 值 来 自 该 表单 中 的 元 素 
值 ;建立 表单 元 素 和 记录 字段 的 对 应 关系 的 方法 ,在 上 一 节 中 已 经 讲 过 了 ,用 同样 的 方法 
将 【表单 元 素 ] 列 表 框 中 的 所 有 的 表单 元 素 对 应 到 其 对 应 的 字段 。 

@@ 单 击 【确定 了 完成 设置 ,并 保存 页 面 。 

(7) 设置 表单 的 提交 动作 参数 ,实现 表单 元 素 值 的 传递 ,真正 把 两 个 页 面 的 功能 衔接 
起 来 。 

完成 本 题 的 操作 步骤 如 下 。 

OO@ 回 到 modifycourse. asp 页 面 的 编辑 窗口 ,如 果 您 已 经 关闭 该 窗口 .那么 请 重新 打 
开 该 文件 。 

@@@ 选择 表单 .在 【属性 3 浮动 面板 中 的 [动作 3 文本 框 中 输入 modifycoursel. asp, 使 得 
提交 表单 时 ,自动 调用 该 页 ,并 传递 表单 元 素 值 ,提交 方式 使 用 POST 方式 ,这 种 方式 没 
有 传递 数据 量 的 限制 ; 当 用 POST 方式 提交 时 ,目的 页 面 用 Request. Form 类 型 的 【请 求 
变量 了 来 接收 参数 ( 当 用 GET 方式 提交 时 .目的 页 面 用 Request. QueryString 类 型 的 [请 
求 变量 3 来 接收 参数 ;不 管用 哪 种 方式 提交 ,请 求 变 量 的 变量 名 ,要 与 表单 元 素 的 名 字 
一 致 ) 。 

@) 保存 页 面 。 

实验 效果 : 

同步 站 点 以 后 ,来 测试 一 下 。 调 用 课程 信息 修改 功能 后 .如 图 13-35 所 示 。 

选择 C0001 后 , 单 击 【 下 一 步 3 按 钮 .可 见 如 图 13-36 所 示 的 画面 。 

修改 过 程 中 ,可 以 尝试 〖[ 清 除 重 填 3 按钮 的 效果 。 修 改 完成 后 , 单 击 【 保 存 信息 3 按钮 应 
该 会 看 到 成 功 信 息 。 


实验 ta 输入 修改 和 查询 系统 的 实验 177 


忆 无 标题 文档 - 于 icrosoft Internet Explorer 


文件 中 ” 炉 辑 于 查看 轨 。 收 意 多。 工具 加 帮助 oD 
GFA- 日 - 国 目 镶 | 记 六 a 名 | 全 - 瑟 国 入 


阐 hetp 1/10 io 1 2/Cowr seSys /mainmens ep 


球 迎 进入 稚 园 同 这 社 系 统 


修改 课程 信息 


请 选择 要 修改 的 课程 号 : [co0 国 
[LE 之 


图 13-35 ”选择 要 修改 的 课程 


台 无 标题 文档 - 了 icrosoft Internet Explorer 
文件 中 六 辑 颈 ) 查看 WD 收藏 和 ) 工具 Cf) 帮助 0 


iE- 昌 - 国 国人 多 | 记 雪 坟 去 收 VN 天 全 | 全 -总 屋 地 
闻 柱 @) | 四 http://10. 10. 1 2/CourseSys/nainmens asp 
Ny 


BS 球 迎 进入 和 恭贺 同 这 和 访 系 统 


修改 课程 信息 


课程 号 : 学 分 : [分 国 


课程 和 名称: [德国 文学 史 一 人 起源 到 当代 


课程 描述 : 
德国 语言 文学 类 


景 大 选课 人 数 : 


图 13-36 ”修改 课程 信息 页 面 
(8) 课程 修改 页 面 ,也 只 有 教务 员 可 以 访问 ,限制 用 户 访 问 级 别 。 
操作 步骤 略 。 
6) 实现 初步 的 课程 信息 查询 功能 


(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 定义 一 个 用 于 课程 信息 查询 的 记录 
集 rstCourse。 


完成 本 题 的 操作 步骤 如 下 。 
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@ 创建 一 个 采用 ASP VBScript 语言 的 新 动态 页 面 。 
回 数据 库 连 接 CourseSys 可 以 直接 使 用 ,不 需要 再 创建 。 
@@ 定义 一 个 记录 集 rstCourse, 如 图 13-37 所 示 。 


:stCourse 


:|coursesys 


: [abo. Course 
加 选 定 的 : 


: |Courseno 


图 13-37 【记录 集 3 对 话 框 


(2) 在 新 页 面 中 ,制作 如 图 13-38 所 示 布 局 页 面 ,利用 服务 器 行为 工具 实现 课程 信息 
查询 功能 。 


上 Pt dl 


Course. Description} | 


图 13-38 ”课程 信息 浏览 查询 页 面 


完成 本 题 的 操作 步骤 如 下 。 

中 按 如 图 13-38 所 示 的 样式 布局 新 页 面 , 其 中 的 动态 文本 ,读者 还 记得 是 怎么 加 入 
的 吗 ? 在 应 用 程序 面板 的 [ 绑 定 3 选项 卡 中 直接 拖 动 rstCourse 的 字段 到 希望 出 现 的 位 置 
就 可 以 了 。 

@ 上 一 步 给 出 了 单个 记录 的 布局 , 接 下 来 将 把 它 扩展 到 多 条 记录 的 布局 ,这 是 通过 
【重复 区 域 3 服 务 器 行为 来 实现 的 :选择 页 面 中 的 表格 部 分 :在 【应 用 程序 3 浮动 面板 的 【 服 
务 器 行为 〗 选 项 卡 , 单 击 鹿 直 按钮 ,选择 【重复 区 域 】。 

@ 在 如 图 13-39 所 示 的 对 话 框 中 .选择 显示 若干 条 记录 ,还 是 显示 所 有 的 记录 ,这 里 
选择 后 者 。 

@ 单 击 【确定 了 按钮 完成 设 定 .保存 页 面 为 CourseSys\courselist. asp。 
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记录 集 : |rstCourse 
显示 : 〇 [0 ] 记录 
加 [所 有 记录 


图 13-39 【重复 区 域 3 对 话 框 


@@ 不 要 忘 了 更 新 选课 系统 的 功能 选择 页 面 ,将 课程 查询 的 超级 链接 指向 新 页 面 。 
实验 效果 : 
同步 站 点 后 ,测试 一 下 。 单 击 网 页 mainmenu. asp 中 的 [浏览 课程 信息 3 按钮 后 , 主 框 
架 中 会 打开 如 图 13-40 所 示 的 画面 。 
当 无 标题 文档 - 了 icrosoft Internet Explorer 


编辑 开 ) 查看 YW) 收藏 和 ) 工具 民 ) 帮助 0 
”加 - 国 国 只 | 记 更 RK 去 收 天天 四 | 它 - 全 国 当 


EECTTT 于 7 


课程 信息 列表 司 
| 课程 号 “| 课程 名 称 | 学 分 “| 最 大 选课 入 数 | 教师 号 
(cool SE 四 a 
| 课程 描述 
联 国 语言 文学 类 
| 课程 号 | 课程 名 称 | 学 分 | 最 大 选课 人 数 | 教师 号 
cooz 个 希腊 藻 学 。 4 froz 
| 课程 撕 述 


图 13-40 ”课程 信息 浏览 结果 


7) 实现 多 页 式 的 课程 信息 查询 功能 

(1) 利用 服务 器 行为 工具 实现 课程 信息 查询 结果 的 分 页 。 完 成 本 题 的 操作 步 又 
如 下 : 

Oz 在 网 页 courselist. asp 中 ,选择 【应 用 程序 3 浮动 面板 的 【服务 器 行为 了 选项 卡 中 , 双 
击 【 重 复 区 域 (rstCourse) 了 ,来 编辑 【重复 区 域 3 的 属性 ,将 【重复 区 域 3 改 为 每 页 只 显示 4 
条 记录 ,如 图 13-41 所 示 。 


= | rstCourse 


显示 ; @ 


图 13-41 【重复 区 域 3 对 话 框 
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@ 保存 页 面 网 页 courselist. asp 后 测试 一 下 ,会 发 现 只 能 看 到 第 一 页 ,无 法 看 到 后 续 
的 页 ,要 看 到 后 续 的 页 ,得 给 重复 区 域 加 上 导航 机 制 。 

(2) 给 分 页 页 面 配 备 相 应 的 导航 条 ,提供 【第 一 页 【前 一 页 【后 一 页 【最 后 一 页 】 
的 跳 转 。 

完成 本 题 的 操作 步骤 如 下 。 

@D 在 页 面 上 定位 光标 到 希望 插入 导航 链接 的 位 置 , 选 择 〖 应 用 程序 3 浮动 面板 的 【 服 


图 13-42 所 示 的 对 话 框 , 完 成 设置 后 单 击 【确定 了 按钮 ,这 样 就 生成 了 转 到 第 一 个 页 面 的 超 
级 链接 。 


页 〗|【 移 至 前 一 条 记录 了 命令 ,可 以 看 到 如 图 13-43 所 示 的 对 话 框 ,完成 设置 后 单 击 【 确 
定 了 按钮 ,这 样 就 生成 了 转 到 前 一 个 页 面 的 超级 链接 。 


二 [ 鲁 津 新 链接 前 一 页 国 
记录 集 : [rstCourse 国 


图 13-42 移 至 第 一 条 记录 对 话 框 图 13-43 移 至 前 一 条 记录 对 话 框 


页 〗|【 移 至 下 一 条 记录 了 命令 ,可 以 看 到 如 图 13-44 所 示 的 对 话 框 ,完成 设置 后 单 击 【 确 
定 了 命令 ,这样 就 生成 了 转 到 后 一 个 页 面 的 超级 链接 。 

页 〗|【 移 至 最 后 一 条 记录 了 命令 .可 以 看 到 如 图 13-45 所 示 的 对 话 框 ,完成 设置 后 单 击 【 确 
定 了 按钮 ,这样 就 生成 了 转 到 最 后 一 个 页 面 的 超级 链接 。 


[| 尘 新 链接 下 一 由 


EEC | 


图 13-44 移 至 下 一 条 记录 对 话 框 图 13-45 移 至 最 后 一 条 记录 对 话 框 


@ 这 样 设置 以 后 ,用 户 就 可 以 通过 这 个 导航 链接 组 来 浏览 课程 信息 的 各 个 页 面 了 ， 
现在 页 面 的 设计 视图 如 图 13-46 所 示 。 

(3) 使 导航 条 的 内 容 根 据 当 前 页 的 位 置 调整 ,不 适用 的 导航 链接 就 不 显示 。 

完成 本 题 的 操作 步骤 如 下 。 

a 在 设计 视图 中 用 鼠标 选择 [前 一 页 3 链接 ,在 【应 用 程序 3 浮动 面板 的 【服务 器 行为 】 
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图 13-46 添加 导航 链接 组 课程 信息 浏览 页 面 


到 如 图 13-47 所 示 的 对 话 框 ,完成 设置 后 单 击 【确定 3 按钮 。 

@ 在 设计 视图 中 用 鼠标 选择 【下 一 页 了 链接 ,在 【应 用 程序 了 浮动 面板 的 【服务 器 行为 了 
选项 卡 中 单 击 出 省 按 钮 ,选择 5 显示 区 域 3 区 如 果 不 是 最 后 一 条 记录 则 显示 区 域 3 命 令 ,可 以 
看 到 如 图 13-48 所 示 的 对 话 框 , 完 成 设置 后 单 击 【确定 了 按钮 。 


如 果 不 是 第 一 条 记录 则 显示 区 城 


图 13-47 如果 不 是 第 一 条 记录 图 13-48 ”如 果 不 是 最 后 一 条 记录 
则 显示 区 域 对 话 框 则 显示 区 域 对 话 框 


@ 保存 页 面 。 
6. 实验 后 的 思考 题 


(1) 本 书 配套 教材 和 实验 里 都 没有 用 服务 器 行为 工具 来 生成 动态 表单 元 素 , 而 是 采 
用 了 手工 设置 的 方法 。 那 么 请 读者 参阅 Dreamweaver 8 的 文档 资料 ,自己 试 一 试用 服务 
器 行为 工具 来 生成 动态 表单 元 素 , 请 读者 自己 设计 补充 实验 , 试 一 试 这些 工 具 的 用 法 。 

(2) 在 本 书 配 套 教材 和 实验 中 ,都 把 知识 点 穿插 在 例子 与 实验 中 出 现 , 请 读者 把 主要 
的 知识 点 做 系统 的 整理 , 养 成 良好 的 学 习习 惯 。 

(3) 有 没有 试 过 页 面 的 【活动 数据 视图 了 1? 不 妨 在 引用 到 动态 数据 的 页 面试 一 坛 。 看 
看 这 种 视图 有 什么 好 处 (读者 至 少 已 经 用 过 【设计 视图 了 和 【代码 视图 了) 。 

(4) 思考 记录 集 定 义 的 各 种 变化 和 设置 ,实现 的 功能 与 什么 比较 类 似 。 能 用 
SELECT 语句 表示 出 记录 集 定 义 的 各 种 变化 和 设置 吗 ? 

(5) 为 什么 要 用 数据 库 连 接 、 记 录 集 来 操控 数据 库 的 数据 ? 而 不 是 直接 调用 Access 
或 SQL Server 2000 之 类 的 数据 库 呢 ?读者 有 没有 试 过 对 用 SQL Server 2000 和 Access 
定义 的 数据 库 连 接 分 别 做 选课 系统 的 实验 .做 法 上 有 什么 不 同 吗 ? 
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人 SELECT 语句 搜索 系统 的 
实验 - 实验 


一 一 校园 网 选课 系统 实验 (3) 


1. 实验 的 目的 与 要 求 


(1) 深入 理解 复杂 的 SELECT 语句 。 

(2) 掌握 使 用 SELECT 语句 实现 搜索 要 求 的 方法 。 

(3) 熟悉 搜索 系统 和 交易 系统 的 实现 。 

(4) 复习 引用 动态 文本 和 数据 的 两 种 方法 ( 拖 动 和 利用 闪电 符号 )。 

(5) 熟悉 记录 和 集 定义 的 各 种 变化 和 设置 。 

(6) 复习 【插入 记录 】【 用 户 身 份 验 证 3 等 服务 器 行为 。 

(7) 复习 【重复 区 域 1【 记 录 集 分 页 7 和 【显示 区 域 ] 等 服务 器 行为 如 何 相互 配 合 工作 。 


2. 系统 功能 与 组 成 


本 实验 将 给 选课 系统 提供 根据 特定 条 件 搜索 课程 的 功能 。 从 初级 的 搜索 功能 开始 ， 
提供 学 生 单 纯 的 搜索 功能 , 即 让 学 生 输 入 一 定 的 条 件 来 查 到 符合 条 件 的 课程 ,再 根据 查 到 
的 信息 到 选课 功能 的 页 面 输入 查 到 的 课程 信息 来 选课 ,也 就 是 说 搜索 和 选课 是 分 离 的 功 
能 。 然 后 把 搜索 和 选课 功能 结合 在 一 起 .在 搜索 到 的 课程 里 直接 提供 了 选课 的 操作 。 

在 选课 过 程 中 .学 生 可 能 想 看 一 下 到 目前 为 止 选 了 哪些 课程 ,这 个 功能 也 类 似 于 电子 
商务 网 站 上 的 购物 车 ,区 别 是 购物 车 里 的 记录 还 没有 提交 生效 。 从 这 个 意义 上 讲 , 学 生 的 
目前 选课 清单 更 精确 的 应 该 是 对 应 于 电子 商务 网 站 中 的 交易 记录 。 


3. 数据 库 设 计 
回顾 选课 系统 的 整体 数据 库 设 计 , 如 图 14-1 所 示 。 


Selection Student 
Studentno 长 | :taaentno 
Courseno [lyane 

国 | neartwent 
剧 micr 


dmin 
Adminno 
Name 


图 14-1 选课 系统 数据 库 结构 


与 本 实验 密切 相关 的 是 Select 表 :该 表 用 来 存储 学 生 选 课 的 信息 :也 就 是 学 生 和 课程 
的 对 应 关系 。 其 中 : 

。 Studentno 字段 存放 学 生 的 学 号 ; 

。 Courseno 字段 存放 课程 号 。 

Selection 表 以 Studentno 和 Courseno 为 主键 。 


4. 实验 的 操作 内 容 


1) 制作 初级 的 搜索 功能 
(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 
(2) 在 新 页 面 中 ,加 入 如 图 14-2 所 示 的 基本 元 素 ;添加 一 个 表单 ,表单 包含 的 元 素 见 
表 14-1 所 示 。 把 这 个 页 面 保存 到 CourseSys 子 目 录 下 , 取 和 名 为 searchcourse. asp。 
Macromedia Dreaaweaver 8 [E:\My site\CourseSys\searchcourse. asp (XHTEL)] 


文件 下 ) 编辑 下) 查看 插入 CI) 修改 电 ) 文本 民 ) 命令 化) 站 点 民 ) 窗口 由， 帮助 0D 


searcheourse. asp 


课 


课程 描述 包含 : [ 一 一 一 站 
一 分 国 只 列 出 尚未 选 满 的 课程 


一 一 一 一 国 
Ny A lo0% ~-|760 x 420v 4K/1 秒 | 


图 14-2 课程 检索 页 面 


表 14-1 表单 域 属性 与 说 明 


元 素 类 型 属 性 值 说 明 
表单 名 字 : frmSearchCourse 本 表单 

名 字 : txtName a 
文本 域 类 型 。 单行 接受 课程 名 称 包 含 的 字 串 
名 字 : txtDescription Se a 
文本 域 类 型 :单行 接受 课程 描述 包含 的 字 串 
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续 表 
元 素 类 型 属 性 值 说 明 


名 字 : selCredit 
类 型 : 菜单 
列表 值 : 一 分 


接受 学 分 条 件 选择 的 菜单 ,这 里 用 0 代表 


列表 /菜单 三 所 有 学 分 取 值 , 即 1 一 5 


中 WN 


所 有 0 
初始 化 时 选 定 : 所 有 


名 字 : chkAvailable 
复 选 框 选 定 值 : 未 满 课 程 设 定 是 否 只 返回 未 选 满 的 课程 的 复 选 框 
初始 状态 : 已 勾 选 


名 字 : selTeacherno 

类 型 : 菜单 

列表 值 : 动态 

静态 选项 :所 有 0 

列表 /菜单 来 自 记 录 集 : rstTeacher 
值 来 自 字 段 : Name 

标签 来 自 字 段 : Name 

选取 值 等 于 : 来 自 rstCourse. 


Teacherno 


接受 教师 号 输入 的 菜单 .这 里 用 0 代表 所 
有 的 教师 


名 字 : btnSearchCourse 
按钮 标签 : 开始 查找 提交 课程 信息 的 按钮 
动作 : 提交 表单 
名 字 : btnClear 
按钮 标签 : 清除 重 填 把 表单 内 容 清除 到 未 填 状 态 的 按钮 
动作 : 重 置 表单 


(3) 创建 名 为 rstSearchResult 的 记录 集 , 用 于 根据 用 户 提供 的 条 件 查 询 课程 。 用 户 
可 以 根据 课程 名 称 、. 课 程 描述 .课程 学 分 .课程 是 否 已 经 选 满 、 任 课 教师 等 信息 来 查询 课程 
信息 ,要求 如 果 客 户 选 择 或 输入 了 某 一 项 条 件 , 即 要 满足 该 项 条 件 ;如 果 选 择 多 项 条 件 , 则 
要 同时 满足 。 例 如 ,用 户 同时 输入 了 课程 名 称 关 键 字 为 “文学 ”", 选择 任课 教师 为 
“Gothe”, 则 系统 应 返回 课程 名 称 中 包含 “文学 "二 字 , 并 且 任 课 教师 为 “Gothe” 的 所 有 
课程 。 

(4) 在 页 面 中 表单 的 下 方 .创建 如 图 14-3 所 示 的 布局 重复 区 域 , 用 于 返回 课程 查 
询 的 结果 ,要求 一 页 返回 4 门 课 的 信息 。 创 建 如 图 14-3 所 示 的 导航 条 ,使 各 个 链接 根 
据 记 录 集 当前 页 的 位 置 确定 是 否 显 示 ,. 并 且 整 个 导航 条 在 返回 记录 为 空 时 ,不 应 
显示 。 

2) 实现 分 离 的 选课 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 
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所 有 国 | 只 列 出 尚未 选 满 的 课程 


所 有 于 


[于 总 查找 ] [清除 重 填 】 <ydiu> <p> 


"| | 
{rstSearchResult. Courseno} |{rstSearchResult. CourseNane} |[{rstSearchResult. Credit} |[{rstSearchResult. 
-, 


{rstSearchResult. TeacherHane} |[{rstSearchResult. Teachernol | {rstSearchResult. 用 


{rstSearchResult. Description} 


图 14-3 创建 了 导航 条 的 网 页 


(2) 创建 rstCourse 记录 和 集 , 包 含 课程 表 的 所 有 记录 ,用 于 选择 课程 号 。 想 办 法 获得 
当前 登录 用 户 的 学 号 。 
(3) 在 新 页 面 中 ,加 入 如 图 14-4 所 示 的 基本 元 素 ; 添 加 一 个 表单 ,表单 包含 的 元 素 如 
表 14-2 所 示 。 把 这 个 页 面 保存 到 CourseSys 子 目 录 下 , 取 名 为 selectcourse. asp。 
O Nacromedia Dreanveaver 8 — [E:\Ny site\Cour s\selectcourse. asp (XHTEL)] © 区 | 
| Bl 


部 


T26 x 271v 2X7 1 炒 


图 14-4 选择 课程 页 面 


表 14-2 表单 域 属性 与 说 明 
元 素 类 型 属 性 值 说 明 


表单 名 字 : frmSelectCourse 本 表单 
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续 表 
元 素 类 型 属 性 值 说 明 


名 字 : selCourseno 
类 型 : 菜单 
列表 值 : 动态 
来 自 : rstCourse 
值 字段 : Courseno 
标签 字段 : Courseno 
初始 化 时 选 定 : rstCourse 的 [第 一 
个 记录 索引 ] 

名 字 : hidStudentno 用 于 存放 通过 rstStudent 查询 到 的 学 号 
江天 区域 值 : rstStudent 的 Studentno 字段 值 信息 
名 字 : btnSelect 
按钮 标签 : 确认 选择 提交 选课 信息 的 按钮 
动作 : 提交 表单 


列表 /菜单 接受 课程 号 输入 的 菜单 


(4) 利用 服务 器 行为 工具 实现 选课 动作 。 限 制 只 有 学 生 才 能 使 用 选课 页 面 ,否则 显 
示 illegalselect. asp 中 的 错误 提示 信息 。 

3) 实现 学 生 所 选课 程 列表 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 

(2) 创建 rstCourse 记录 和 集 , 用 于 查询 当前 用 户 已 选择 的 课程 。 

(3) 在 新 页 面 中 ,加 入 如 图 14-5 所 示 的 重复 区 域 , 要 求 一 页 返回 4 门 课 的 信息 。 创 建 
如 图 14-5 所 示 的 导航 条 ,使 各 个 链接 根据 记录 和 集 当 前 页 的 位 置 确定 是 否 显 示 , 并 且 整 个 
导航 条 在 返回 记录 为 空 时 ,不 应 显示 。 把 这 个 页 面 保存 到 CourseSys 子 目 录 下 , 取 名 为 


selectedcourses. asp。 


{rstCourse, Courseno} |{rstCourse. Nane 


{rstCourse. Description} 


图 14-5 已 选课 程 显 示 列 表 


4) 实现 集成 的 搜索 和 选课 功能 

改进 搜索 功能 ,把 搜索 和 选课 功能 结合 在 一 起 ,在 搜索 到 的 课程 清单 里 的 每 门 课 里 ， 
直接 提供 选课 操作 ,用 于 选课 的 按钮 如 图 14-6 所 示 ,但 是 教师 和 教务 员 不 应 该 看 到 这 个 
按钮 。 
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EECTT [ 记 六 闭 


开始 查找 </diuy <Ip> 


{rstSearchResult.Courseno] |[{rstSearchResult.CourseName} |{rstSearchResult. Credit} 


{rstSearchResult. TeacherName} {rstSearchResult. Teacherno} 


{rstSearchResult. Description} 


图 14-6 搜索 和 选课 功能 结合 的 网 页 


5. 实验 的 参考 步骤 


1) 制作 初级 的 搜索 功能 
(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 
操作 步 又 略 。 
(2) 在 新 页 面 中 ,加 入 如 题 意 要 求 的 网 页 元 素 ,添加 一 个 如 题 意 的 表单 。 把 这 个 页 面 
保存 到 CourseSys 子 目 录 下 . 取 名 为 searchcourse. asp。 
完成 本 题 的 操作 步骤 如 下 。 
@D 按照 题 意 添加 元 素 和 表单 ,具体 步骤 略 。 
G@ 标题 和 其 他 静态 部 分 可 以 根据 自己 的 喜好 来 设计 ,使 页 面 美观 ,可 以 自由 发 挥 ; 表 
单 部 分 是 必须 有 的 .将 用 它 来 生成 动态 行为 ;对 各 个 表单 元 素 . 采 用 的 匈牙利 命名 法 。 
@@ 选择 主 菜单 中 的 [文件 XI【 保 存 2 命 令 .把 这 个 页 面 保 存 到 CourseSys 子 目 录 下 , 取 
名 为 searchcourse. asp。 
注意 : 
这 里 有 两 个 小 技巧 。 
。 学 分 和 授课 教师 菜单 都 不 需要 从 零 开 始 创建 , 因 为 在 输入 课程 信息 和 修改 课程 信 
息 的 页 面 里 都 已 经 有 类 似 的 表单 元 素 , 因 此 可 以 从 这 些 页 面 中 复制 表单 元 素 并 在 
新 页 面 中 粘贴 生成 同样 的 元 素 , 然 后 再 修改 属性 即 可 事半功倍 。 必 须 按 照 表格 里 
的 要 求 把 属性 改 对 了 。 
。 对 授课 教师 菜单 而 言 , 光 复制 菜 单 还 不 够 ,因为 它 有 相对 应 的 记录 集 ,必须 把 记录 
集 也 复制 并 粘贴 过 来 。 复 制 记 录 集 在 源 页 面 和 目的 页 面 的 【应 用 程序 了 浮动 面板 
的 【 绑 定 了 选项 卡 中 完成 。 
(3) 创建 名 为 rstSearchResult 的 记录 集 , 用 于 根据 用 户 提供 的 条 件 查 询 课程 。 用 户 
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可 以 根据 课程 名 称 、. 课 程 描述 .课程 学 分 .课程 是 否 已 经 选 满 、 任 课 教师 等 信息 来 查询 课程 
信息 ,要 求 如果 客户 选择 或 输入 了 某 一 项 条 件 , 即 要 满足 该 项 条 件 ,如 果 选 择 多 项 条 件 , 则 
要 同时 满足 。 例 如 ,用 户 同 时 输入 了 课程 名 称 关键 字 为 “文学 ”, 选 择 任课 教师 为 
“Gothe”, 则 系统 应 返回 课程 名 称 中 包含 “文学 ”二 字 , 并 且 任 课 教师 为 “Gothe” 的 所 有 
课程 。 

完成 本 题 的 操作 步骤 如 下 。 

Q@ 如 图 14-7 所 示 ,在 创建 记录 的 对 话 框 中 , 单 击 【 高 级 3 按钮 ,进入 复杂 记录 和 集 设 置 


[etssearchResult| 


scoursesys 


| abo. Account 


和 〇 选 定 的 : 


图 14-7 记录 和 集 对 话 框 


@ 在 高 级 模式 下 ,如 图 14-8 所 示 设 置 各 个 选项 ,具体 各 个 选项 的 含义 接 下 来 将 一 一 
叙述 。 


: [rtsSearchResult 


: [Coursesys 图 | [定义 


SELECT Courseno, dbo. Course. Hame AS CourseName, Description, 
:|Credit, Maxcimumnum, dbo. Teacher. Teacherno, dbo. Teacher. Hame AS 
Teacher Nane," (SELECT COUNT C#) FRON dbo" Seiect? on WHERE 

dbo. Selection. Courseno = dbo. Course.Courseno) AS CurrentHum 

FRO 和 bs Course, bo" Teacher WERE” (dbo" ieacher Teacherno = 


Request. Form ("selTeacherno”) 


mAwailabla 是 Request. 了 orm (“chkAvailable”") 


四 ETE 添加 到 sqL: 
SELECT 


田中 视图 
长 ”预存 过 程 


图 14-8 ”高 级 记录 集 对 话 框 
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GT 名称 和 【连接 了 这 两 项 ,应 该 不 需要 再 作 解 释 了 .如 图 设置 就 行 。 
@ 复杂 的 【记录 集 了 是 基于 复杂 的 SQL 查询 语句 SELECT 的 。 首 先 , 在 【变量 了 设置 
区 域 中 添加 在 SELECT 语句 中 需要 用 到 的 变量 ,使 用 变量 可 以 方便 的 引用 表单 元 素 的 
值 ;在 这 里 变量 有 默认 值 和 运行 时 值 两 类 : 
。 默认 值 在 表单 提交 前 起 作用 ,因为 此 时 表单 元 素 还 没有 有 效 的 值 ,同时 它 还 在 测 
试 时 起 作用 ,如 果 单 击 【 测 试 3 按 钮 :出现 的 查询 结果 就 是 以 默认 值 为 条 件 填 人 上 
面 的 SQL 语句 所 得 到 的 查询 结果 ; 
。 运行 时 值 通常 都 是 用 表单 元 素 值 ,在 表单 提交 后 起 作用 ,当然 ,也 可 以 用 别 的 动态 
值 。 这 里 添加 的 变量 如 表 14-3 所 示 。 
表 14-3 ”变量 的 值 与 说 阴 


变 量 名 值 说 明 
mmNameStr 默认 值 : % 用 于 引用 表单 提交 后 
和 运行 时 值 : Request. Form("txtName") txtName 的 值 
mmDescriptionStr 默认 值 ，% 用 于 引用 表单 提交 后 
Wa 运行 时 值 : Request. Form("txtDescription") txtDescription 的 值 
Greg 默认 值 : 一 1 用 于 引用 表单 提交 后 
A 运行 时 值 : Request. Form("selCredit") selCredit 的 值 
默认 值 : 0 


用 于 引用 表单 提交 后 


Teach 运行 时 值 : 
mmleacher 运行 时 值 selTeacherno 的 值 


Request. Form( "selTeacherno") 


用 于 引用 表单 提交 后 


默认 值 : 1 chkAvailable 的 值 的 个 数 , 提 
mmAvailable 运行 时 值 : Request. Form("chkAvailable"). 交 表 单 时 若 该 复 选 框 被 选 
count 中 , chkAvailable 的 值 的 个 


数 二 1, 否 则 个 数 = 二 0 


注意 : 

可 以 通过 使 用 不 同 的 默认 值 来 测试 复杂 记录 集 的 运行 效果 。 

@ 接 下 来 是 到 目前 为 止 最 难 的 一 个 任务 . 即 编写 SELECT 查询 语句 ,把 它 填 入 
【SQL: ] 文 本 框 中 ,图 中 的 SELECT 语句 不 能 看 全 ,完整 的 语句 如 下 : 


SELECT Courseno, dbo. Course. Name RS CourseName. Description. Credit., 
Maximumnum, dbo.Teacher.Teacherno. dbo. Teacher. Name AS TeacherNanme. 
(SELECT COUNT( * ) FROM dbo. Selection 

WHERE dbo. Selection. Courseno = dbo. Course. Courseno) AS CurrentNum 
FROM dbo. Course. dbo. Teacher 
WHERE (dbo. Teacher. Teacherno = dbo. Course. Teacherno) 
RND (dbo. Course. Name LIKE ' %' + LTRIM(RTRIM('mmNameStr'))+'%" 
OR LEN(LTRIM(RTRIM('mmNameStr')))=0) 
RND (dbo. Course. Description LIKE ' %' + LTRIMCRTRIM('mmDescriptionStr' )) + ' 委 " 
OR LEN(LTRIM(RTRIM('mmDescriptionStr')))=0 ) 
AND (dbo.Course. Credit = mmCredit OR mmCredit =0 ) 
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RND (LTRIM(RTRIM(dbo. Teacher. Name) ) = LTRIM(RTRIM(' mmTeacher' ) ) 
OR LTRIM(RTRIM('mmTeacher' )) = '0' ) 
RND (Maximumnum 一 
(SELECT COUNT( * ) 
FROM dbo. Selection 
WHERE dbo. Selection. Courseno = dbo. Course. Courseno) 


OR LTRIM(RTRIM(' mmRvailable' )) 一 二 '1') 


注意 : 

这 个 SQL 语句 相当 复杂 ,可 以 说 掌握 了 这 个 语句 ,SELECT 语句 的 变化 基本 上 就 掌 
握 了 。 这 个 语句 包含 了 子 查询 ,包含 了 多 个 表 的 连接 ,包含 了 不 同 表 的 重 名 字段 的 区 分 方 
法 。 这 里 不 多 涉及 SELECT 语句 的 语法 , 仅 对 一 些 要 点 作 必 要 的 解释 ,需要 了 解 
SELECT 语句 用 法 的 读者 ,作为 一 项 作业 ,请 自己 查阅 相关 的 SQL 命令 参考 或 关系 数据 
库 教材 。 


(SELECT COUNT( * ) FROM dbo. Selection WHERE dbo. Selection. Courseno 一 
dbo. Course. Courseno) AS CurrentNum 是 一 个 子 查询 ,用 于 提供 结果 记录 集中 
代表 当前 选 本 课 的 总 人 数 的 虚拟 字段 ,并 且 将 此 字段 命名 为 CurrentNum。 

(dbo. Teacher. Teacherno 一 dbo. Course. Teacherno) 条 件 把 Course 和 Teacher 表 
通过 相同 的 教师 号 字段 连接 起 来 。 

由 于 Course 和 Teacher 表 中 都 有 名 为 Name 的 字段 .但 显然 含义 不 同 , 这 两 个 在 
结果 记录 集中 都 需要 ,因此 会 引起 歧义 。 解 决 方法 是 把 这 两 个 字段 中 的 一 个 或 者 
全 部 命名 成 其 他 名 字 。 这 就 是 dbo. Course. Name AS CourseName 和 dbo. 
Teacher. Name AS TeacherName 完成 的 事情 。 

变量 在 SQL 语句 中 作为 字符 串 值 出 现 .% 是 SQL 字符 串 模式 中 的 一 个 通配符 ， 
因此 ,mmNameStr 等 变量 默认 值 的 取 值 %% 也 是 这 个 含义 。 

这 LTRIM 和 RTRIM 两 个 函数 联 用 ,用 于 删除 字符 串 两 边 的 空格 ,因为 空格 也 算 
作 字 符 串 的 一 部 分 ,因此 在 字符 串 的 比较 中 如 果 不 删 除 两 边 的 空格 ,那么 
Newton ”和 “Newton "将 被 认为 是 不 同 的 值 ,这 显然 不 是 我 们 期 望 的 。 忘 
了 删除 两 边 的 空格 ,这 是 初学 者 常 犯 的 错误 之 一 。 

搜索 条 件 中 的 所 有 条 件 之 间 是 “ 且 ? 的 关系 ,每 一 个 条 件 又 都 有 两 种 情况 : 被 考虑 
或 不 被 考虑 。 例 如 ,如 果 “ 课 程 名 称 包 含 :“ 这 一 条 件 不 输入 任何 内 容 时 ,这 个 条 
件 就 不 被 考虑 ,不 被 考虑 的 另 一 个 含义 就 是 条 件 总 是 成 立 。 对 应 于 这 个 条 件 的 
SQL 语句 部 分 就 是 : (dbo. Course. Name LIKE '% ' 十 LTRIM(CRTRIM (' 
mmNameStr) ) 十 '"%'OR LENCLTRIMCRTRIMCmmNameStrD))) 一 0 )。 也 就 
是 , 当 课 程 名 称 包 含 输入 的 字符 串 时 成 立 ,或 者 输入 的 字符 串 长 度 为 0 时 成 立 。 


这 个 SELECT 语句 非常 具有 代表 性 ,请 读者 注意 掌握 。 

@ 编写 完 SELECT 语句 ,可 以 将 mmCredit 变量 的 默认 值 暂时 改 为 0, 单 击 【 测 试 了 按 
钮 应 该 返回 所 有 的 课程 记录 ,如 图 14-9 所 示 的 是 测试 结果 ,此 时 表 中 两 条 课程 记录 全 部 
显示 了 ,因为 所 有 的 变量 的 默认 值 的 含义 暂时 都 是 取 该 字段 所 有 值 ; 别 忘 了 测试 完 后 ,把 
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mmCredit 变量 的 默认 值 改 回 一 1。 
@) 单 击 【确定 了 按钮 完成 记录 集 定义 。 


测试 59L 指 令 


| Courseno | Cours... 
cool ... 德国 文 . 
coo2 ... 上 古 希腊 ... 区 


图 14-9 返回 所 有 的 课程 记录 测试 结果 


(4) 在 页 面 中 表单 的 下 方 , 创 建 如 图 14-10 布局 的 重复 区 域 ,用 于 返回 课程 查询 的 结 
果 ,要 求 一 页 返回 4 门 课 的 信息 。 创 建 如 图 14-10 所 示 的 导航 条 ,使 各 个 链接 根据 记录 集 


pe 


回 只 列 出 尚未 选 漠 的 课程 


[还 际 重 填 】 《vdiv> </p> 


rst searchResult. Description} 


图 14-10 设置 重复 区 域 和 导航 条 
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完成 本 题 的 操作 步骤 如 下 。 

GO 按 题 意 创建 表格 , 拖 动 记录 集 rstSearchResult 下 的 相应 字段 到 对 应 的 位 置 。 

注意 : 

CourseName、TeacherName 和 CurrentNum 这 几 个 虽然 是 虚拟 字段 ,但 是 看 起 来 和 
其 他 字段 一 样 , 没 什么 区 别 , 同 样 作为 动态 数据 项 出 现 。 

G@) 用 鼠标 选择 整个 表格 ,创建 【重复 区 域 3 服 务 器 行为 ,将 每 页 返回 的 记录 个 数 设 
为 4。 

@@ 添加 4 个 【记录 和 集 分 页 服务 器 行为 来 创建 导航 条 ;用 【显示 区 域 ] 类 的 服务 器 行 
为 ,来 控制 链接 根据 当前 记录 所 在 页 的 位 置 确定 是 否 显示 。 

注意 : 

设置 重复 区 域 和 导航 条 时 ,应 选择 这 些 服 务 器 行为 针对 rstSearchResult 记录 集 起 
作用 。 

@ 导航 条 在 没有 记录 时 不 要 出 现 , 因 此 ,还 要 添加 一 个 [显示 区 域 3 类 的 服务 器 行为 ， 
来 控制 整个 导航 条 的 显示 : 在 设计 视图 中 用 
属 标 选择 整个 导航 条 在 【应 用 程序] 主动 而 朴 


如 果 记 录 集 不 为 空 则 显示 区 域 


KE 示 本 坊 和 [如 | 呈 亿美 多 不 为 村 询 丰 示人 区 元 
命令 ,可 以 看 到 如 图 14-11 所 示 的 对 话 框 , 如 
图 设置 参数 后 单 击 【 确 定 ] 按 钮 确认 。 

加 保存 页 面 , 并 设置 主 功 能 页 面 
mainmenu. asp 中 【检索 课程 信息 3 按钮 的 链接 ,指向 搜索 页 面 。 

@ 设置 用 户 授权 级 别 , 用 来 阻挡 未 登录 的 访问 。 

实验 效果 : 

从 主 功能 页 面 单 击 【检索 课程 信息 3 按钮 ,将 看 到 如 图 14-12 所 示 的 画面 。 


怨 无 标题 文档 - Microsoft Internet Explorer 
文件 了 E) 蝙 辑 于) 查看 GO 收 辣 由 ) 工具 CD。 稳 助 0 


3 国 国 次 | 全 扫 索 去 收 藉 赤 名 | 个- 名 车 又 


图 14-11 设置 导航 条 的 显示 区 域 


ap 


欢迎 进入 核 园 网 这 名 系 统 
搜索 课程 信息 
输入 检索 条 件 
课程 名 称 包 含 : | 
课程 描述 包含 | 
学 分 : 所 有 国 | 回 只 列 出 尚未 选 满 的 课程 


授课 教师 : | 所 有 EJ 


开始 查找 清除 重 填 


图 14-12 校园 网 选课 系统 的 主 功能 页 面 
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先 来 查 查 看 所 有 学 分 为 5 学 分 的 课程 。 结 果 如 图 14-13 所 示 。 


学 分 : 五 分 国 只 列 出 尚未 选 满 的 课程 | 
授课 教师 : | 所 有 国 


GE EE | 
课程 号 ”| 课程 名 称 学 分 | 最 大 选课 人数 | 
[Coor 硬 国 文学 史 一 从 稳 源 到 当代 “5 20 
授课 教 珊 | 教 珊 本 | 目前 透 课 大 可 | 
ewt on Frol 0 
课程 描述 


陇 国语 言 文学 类 


图 14-13 查询 结果 示意 图 
再 查看 Gothe 老师 开 的 课 名 中 出 现 “ 文 学 ”二 字 的 还 有 哪 几 门 课程 没 满员 。 结 果 如 
图 14-14 所 示 。 
轨 无 标题 文档 看 ft Internet Explorer 


文件 时) ”编辑 邓 ) 查 ; 收藏 由 ) 工具 CI) 帮助 00) 
@Ra- 曲 - 国 国人 欣 | 亿 扫 雪 交 收 天 如 | 全 -总 国志 


Ss 殉 锰 进入 秒 园 同 这 课 系 统 


学 分 : 所 有 国 回 只 列 出 尚未 选 满 的 课程 
授课 教师 : [EC 本 


DEE] LR] 


三 深 程 寻 “| 课程 名 称 | 学 分 | 最 天 选课 人数 
kaag “有 联 国 古典 文子 [8 | 
毛 课 教师 | 概 师 可 百 前 透 课 大 要 
1 
课程 描述 
| 是 计 我 的 《学 十 德 》 了 - 


图 14-14 查询 结果 示意 图 


2) 实现 分 离 的 选课 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 

操作 步骤 略 。 

(2) 创建 rstCourse 记录 集 ,包含 课程 表 的 所 有 记录 ,用 于 选择 课程 号 。 想 办 法 获得 
当前 登录 用 户 的 学 号 。 
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O@ 将 modifycourse. asp 中 的 rstCourse 复制 粘贴 过 来 直接 用 。 
@ 创建 如 图 14-15 所 示 的 rstStudent 记录 集 用 于 根据 用 户 名 获取 学 号 。 


:lrstStudent 
: |Coursesys 图 | [定义 ...] 


SELECT Studentno 
;|FROM dbo. Student, dbo. Account 
sernane = "mmUsername’ AND LTRIN (RTRIN (UserNo)) = 
ILTRIN (RTRIN (Studentno)) 


: El 到 | 
名 称 运行 时 全 


mmUsername SessionC II_Usernane ) 


图 14-15 获取 学 号 的 记录 集 
完整 的 SELECT 请 句 如 下 。 


SELECT Studentno 
FROM dbo. Student, dbo. Account 
WHERE Username = 'mmUsername' AND LTRIM( RTRIM(UserNo)) = LTRIM(RTRIM( Studentno)) 


其 中 用 到 了 mmUsername 变量 .用 它 来 引用 存储 了 用 户 名 的 MM_Username 会 话 变 
县 。 

在 表单 中 创建 隐藏 文本 hidStudentno ,用 于 存放 获取 的 学 号 信息 。 

(3) 在 新 创建 的 页 面 中 ,加 入 如 题 意 的 基本 元 素 ; 添 加 一 个 如 图 14-4 所 示 的 表单 。 
把 这 个 页 面 保存 到 CourseSys 子 目录 下 . 取 名 为 selectcourse. asp。 

OO 按照 题 意 添加 元 素 和 表单 ,并 按 表 14-2 的 要 求 给 表单 域 命名 .具体 步骤 略 。 

@ 选中 表单 中 的 列表 菜单 域 , 在 【属性 了 浮动 面板 中 , 单 击 区 动态 j 按 钮 ,并 在 如 
图 14-16 所 示 的 [动态 列表 /菜单 对 话 框 中 设置 参数 : 

。 在 【菜单 ] 中 设置 “selCourseno 在 表单 frmSelectCourse”。 

。 在 【来 自 记录 集 的 选项 下 拉 列 表 框 中 选择 rstCourse。 

。 在 【 值 3 和 区 标签 下拉 列表 框 中 选择 Courseno。 

。 单 击 【 选 取 值 等 于 了 文本 框 右边 的 闪电 符号 .选择 【动态 数据 〗 对 话 框 中 rstCourse 

记录 集 的 [第 一 个 记录 索引 ] 。 

@) 单 击 【5 确定] 按钮 确认 。 

@ 选择 主 菜 单 中 的 【文件 了 人民 保存 了 命令 .把 这 个 新 建 的 页 面 保存 到 CourseSys 子 目 
录 下 , 取 和 名 为 selectcourse. asp。 
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动态 列表 7/ 荣 单 


菜单 : | "selCoursene” 在 表单 “frnsel. 国 


攻 态 选项 : 二 | 二 | 蕊 蕊 | 


值 标签 


rstCourse 


:|Courseno 


;|Courseno 


N= (rstCourse first)%> 


图 14-16 【动态 列表 /菜单 3 对 话 框 
(4) 利用 服务 器 行为 工具 实现 选课 动作 。 限 制 只 有 学 生 才 能 使 用 选课 页 面 ,否则 显 


示 illegalselect. asp 中 的 错误 提示 信息 。 


完成 本 题 的 操作 步骤 如 下 。 
@ 在 网 页 selectcourse. asp 中 保存 选课 信息 同样 是 利用 [插入 记录 】 服 务 器 行为 来 实 


现 ,设置 信息 如 图 14-17 所 示 。Insertsucess. asp 成 功 提 示 页 面 请 自行 创建 。 


:|CourseSys 


$ |abo. Selection 


insertsuccess. asp 


frmSelectCourse 


图 14-17 【插入 记录 了 对话 框 


注意 : 
设置 方法 读者 应 该 已 经 很 熟练 了 ,如果 有 困难 ,请 复习 本 书 配套 教材 的 内 容 。 


G@) 保存 选课 页 面 selectcourse. asp。 
@ 创建 如 图 14-18 所 示 的 非法 访问 信息 提示 页 面 , 把 这 个 页 面 保存 到 CourseSys 子 


目录 下 , 取 名 为 illegalselect. asp。 
@ 回 到 选课 页 面 selectcourse. asp ,添加 【限制 对 页 的 访问 了 服务 器 行为 ,如 图 14-19 


所 示 。 
@ 保存 页 面 。 
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全 Hacroaedia Dreamweaver 8 - [E:\y sitevCourseSysvillegalselect-asp--- 攻 | 操 | 匠 | 


文件 下) 编辑 让) 查看 QW) 插入 C) 修改 虽 文本 加 命令 CC) 站 点 名 ) 窗口 个 帮助 0D 


illegalselect. asp 


1 了 ft | 国 拆 分 | 国 设计 ] [国标 是 3 2 MO. | © . ®. 
RP PR PR POR SE 理惠 用 FN PR HPP SHER SA RRR 


图 14-18 ”非法 访问 信息 提示 页 面 


限制 对 页 的 访问 


基于 以 下 内 容 进行 限制 : 〇 ”用户 名 和 密码 
回 ”用户 名 、 密 码 和 访问 级 别 


选取 级别 : ||aamin 
teacher 


如 果 访问 被 拒绝 ， 则 转 到 |: [illezalselect_asp 


图 14-19 【限制 对 页 的 访问 〗 对 话 框 


人) 在 主 功能 页 面 mainmenu. asp 中 加 入 到 选课 页 面 的 链接 。 
3) 实现 学 生 所 选课 程 列 表 功 能 
(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 


(2) 创建 rstCourse 记录 集 , 用 于 查询 当前 用 户 已 选择 的 课程 。 
完成 本 题 的 操作 步骤 如 下 。 


@ 将 selectcourse. asp 中 的 rstStudent 复制 粘贴 过 来 直接 用 。 
@ 创建 如 图 14-20 所 示 的 rstCourse 记录 集 , 用 于 查询 当前 用 户 已 选择 的 课程 。 
完整 的 SQL 语句 如 下 : 


SELECT dbo. Course. Courseno，dbo. Course. Name, Description, Credit, 
dbo. Teacher. Name AS TeacherName 
FROM dbo. Course, dbo.Teacher. dbo. Selection 
WHERE LTRIM(RTRIM( dbo. Course. Teacherno) ) = LTRIMCRTRIM(Cdbo. Teacher. Teacherno) ) 
RND LTRIM(RTRIM( dbo. Selection. Studentno) ) = 'mmStudentno’ 


AND dbo. Selection. Courseno = dbo. Course. Courseno 
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[rstCourse 


:|CourseSys 国 | (定义... ] 


SELECT dbo.Course.Courseno, dbo.Course. Hame, Description, Credit, 
:|dbo. Teacher. Name AS TeacherName 

IFROMN dbo. Course, dbo.Teacher， dbo.Selection 

WHERE LTRIM (RTRIM (dbo. Course. Teacherno)) = 

[LTRINM (RTRIN (dbo. Teacher. Teacherno)) 


: 划 司 
名 称 ”默认 值 


no name rstStudent. Fields. Item ("Student... 


图 14-20 ”创建 rstCourse 记录 的 示意 图 


注意 : 

这 个 SELECT 语句 连接 了 3 个 表 , 注 意 表 与 表 之 间 通 过 公共 字段 相连 接 。 

其 中 使 用 了 mmStudentno 变量 ,用 来 引用 查询 到 的 学 号 信息 ,由 于 学 号 信息 来 自 
rstStudent 记录 集 , 因 此 要 求生 成 rstCourse 记录 集 时 ,rstStudent 应 已 经 存在 ,因此 在 创 
建 记 录 集 时 ,我 们 先 创建 rstStudent, 后 创建 rstCourse。 

(3) 在 新 页 面 中 ,加 入 如 题 意 的 重复 区 域 和 导航 条 。 把 这 个 页 面 保 存 到 CourseSys 
子 目 录 下 , 取 名 为 selectedcourses. asp。 

完成 本 题 的 操作 步骤 如 下 。 

Oz 创建 重复 区 域 和 导航 条 。 

@ 选择 主 菜单 中 的 【文件 了 攻 保 存 了 命令 ,把 这 个 页 面 保 存 到 CourseSys 子 目 录 下 , 取 
名 为 selectedcourses. asp。 

@ 设置 用 户 授 权 级 别 。 

4) 实现 集成 的 搜索 和 选课 功能 

改进 搜索 功能 ,把 搜索 和 选课 功能 结合 在 一 起 ,在 搜索 到 的 课程 清单 里 的 每 门 课 里 直 
接 提 供 选 课 操作 ,用 于 选课 的 按钮 如 图 14-20 所 示 : 但 是 教师 和 教务 员 不 应 该 看 到 这 个 
按钮 。 

完成 本 题 的 操作 步骤 如 下 。 

Q@ 打开 searchcourse. asp。 

@ 添加 一 个 与 selectcourse. asp 中 相同 的 rstStudent 记录 集 用 于 获取 当前 用 户 的 
学 号 。 

@ 在 重复 区 域 中 的 返回 记录 表格 中 增加 一 行 :在 新 行 中 添加 一 个 表单 ,如 图 14-21 
所 示 。 表 单 包 含 的 元 素 如 表 14-4 所 示 。 


198 一 电子 商务 网 站 建设 实验 指导 (第 2 版 ) 


</diu> 


/p> 


{rstSearchResult. Courseno}| 


{rstSearchResult. CourseNane} 


{rstSearchResult. Credit} 


{rstSearchResult. TeacherNane} 


{rstSearchResult. Teacherno} |[{rstSearchResult. 


{rstSearchResult. Description} 


图 14-21 


搜索 与 选课 结合 的 网 页 页 面 


表 14-4 表单 域 属性 与 说 明 


元 素 类 型 属 性 值 说 明 
表单 名 字 : frmSearchCourse 本 表单 
i 名 字 : hidStudentno 用 于 存放 通过 rstStudent 查询 到 的 
协 二 区 规 值 : rstStudent 的 Studentno 字段 值 学 号 信息 
隐藏 区 域 名 字 : hidCourseno 用 于 存放 通过 rstSearchResult 中 当 
ss 值 : rstSearchResult 的 Courseno 字段 值 前 课程 记录 的 课程 号 信息 
名 字 : btnSelect 
按钮 标签 : 我 要 选 这 门 课 提交 选课 信息 的 按钮 


动作 : 提交 表单 


@ 添加 一 个 如 图 14-22 所 示 的 【插入 记录 了 服务 器 行为 。 


3 |CourseSys 


下 | dbo. Selection 


imsertsuccess asp 


hi dC our sen 


"Courseno” 


国 | stuaentno 国 
引文 本 回 


图 14-22 【插入 记录 了 对 话 框 


实验 世 SELECT 语句 搜索 系统 的 实验 199 


@ 保存 网 页 页 面 。 

实验 效果 : 

与 实验 内 容 *1) 制 作 初 级 的 搜索 功能 ”中 不 同 , 开 始 查找 之 后 ,返回 的 课程 清单 的 每 一 
项 后 都 带 有 一 个 【我 要 选 这 门 课 了 的 按钮 。 如 果 用 户 想 要 选 某 一 门 课 .只 要 按 这 门 课 后 的 
按钮 就 行 了 。 

想 想 看 ,如 果 教 师 或 者 教务 员 使 用 了 搜索 功能 ,他 们 不 应 该 看 到 这 个 按钮 。 怎 么 
办 呢 ? 

当 用 户 是 教师 或 者 教务 员 时 ,rstStudent 记录 集 查 不 到 学 号 ,因此 这 个 记录 集 是 空 
的 。 所 以 ,可 以 选中 frmSelectCourse 表单 所 在 的 表格 单元 ,添加 一 个 [如 果 记 录 集 不 为 空 
则 显示 了 的 服务 器 行为 。 这 样 ,选课 按钮 就 只 有 学 生 能 看 到 了 。 


6. 实验 后 的 思考 题 


(1) 表单 中 的 隐藏 区 域 元 素 起 到 什么 作用 ? 请 举例 说 明 。 

(2) 本 书 配 套 教材 和 实验 里 都 没有 用 到 “ 主 详细 页 集 ” 类 服务 器 行为 ,包括 “ 转 到 相关 
页 "和 “ 转 到 详细 信息 页 ”。 请 读者 查阅 文档 ,学 习 这 类 服务 器 行为 的 用 途 和 用 法 。 

(3) 无 论 您 用 SQL Server,Access, 甚 至 其 他 数据 库 作 为 您 的 Web 应 用 程序 的 数据 
库 , 各 种 数据 库 都 有 辅助 编写 SQL 查询 和 测试 SQL 查询 的 工具 ,请 读者 查阅 相关 数据 库 
的 资料 和 手册 ,找到 编写 SQL 查询 和 测试 SQL 查询 的 工具 ,学 会 如 何 使 用 。 通 过 工具 编 
写 SQL 语句 将 大 大 方便 读者 ,减少 错误 。 

(4) 本 实验 中 的 选课 动作 并 没有 检查 所 选 的 课程 是 否 已 经 选 过 了 ,请 有 兴趣 的 读者 
通过 扩展 服务 器 行为 的 方式 实现 这 一 检查 功能 。 

(5) 本 实验 中 的 选课 动作 并 没有 检查 所 选 的 课程 是 否 名 额 已 满 , 请 有 兴趣 的 读者 通 
过 扩展 服务 器 行为 的 方式 实现 这 一 检查 功能 。 

(6) 请 读者 自己 设计 类 似 的 完整 的 实验 来 熟悉 Web 应 用 程序 ,例如 BBS ,校友 录 等 。 
读者 甚至 可 以 设计 更 加 复杂 的 实验 来 做 ,来 学 习 更 多 的 内 容 。 
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1 5 留言 簿 的 实验 
实验 


1. 实验 的 目的 与 要 求 
复习 学 过 的 部 分 知识 点 。 
2. 系统 功能 与 组 成 


由 于 一 部 分 读者 比较 关心 留言 筹 和 BBS 的 实现 方法 .所 以 这 里 增加 一 个 留言 簿 的 实 
验 。 至 于 BBS, 实 质 上 是 带 有 用 户 信 息 和 结构 层次 的 复杂 一 点 的 留言 竹 , 因 此 这 里 不 给 出 
实验 , 留 给 读者 自己 思考 。 

留言 簿 系统 包括 两 个 基本 功能 : 留言 和 查看 留言 。 本 实验 的 留言 每 将 挂 在 选课 系 
统 中 。 


3. 数据 库 设 计 


回顾 选课 系统 的 整体 数据 库 设 计 , 如 图 15-1 所 示 。 
EE | EB 


Account 了 
ve 加 站 

psswra [rrp] 

| suthLevel ye 

加 |v:erwo 


图 15-1 选课 系统 的 整体 数据 库 结 构 


现在 新 增加 一 个 Messageboard 表 , 数 据 库 设 计 变 为 如 图 15-2 所 示 的 结构 。 
Messageboard 表 用 来 存储 留言 竹中 的 留言 。 其 中 : 

。 UserNo 字段 指明 了 是 谁 的 留言 ; 

。 Datetime 字段 存放 了 留言 的 时 间 ; 

。 Message 存放 了 留言 的 具体 内 容 。 
Messageboard 表 以 UserNo 和 Datetime 为 主键 。 


Course Selection Student 


Courseno Studentno Studentno 
Name Courseno Hame 


Messageboard 丰 
VserHo 
Datetime 
essage 


图 15-2 修改 后 的 选课 系统 的 整体 数据 库 结 构 


4. 实验 的 操作 内 容 


1) 制作 留言 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 

(2) 创建 rstUserNo 记录 集 , 包 含 当 前 用 户 的 账户 信息 。 想 办 法 获得 当前 登录 用 户 
的 用 户 号 。 

(3) 在 新 页 面 中 ,加 入 如 图 15-3 所 示 的 基本 元 素 ; 添 加 一 个 表单 ,表单 包含 的 元 素 见 
表 15-1 所 示 。 把 这 个 页 面 保存 到 CourseSys 子 目录 下 , 取 和 名 为 insertmsg. asp。 


司 Hacromedia Dreanweaver 8 — [E:MEy7 sitevCourseSysvinsertasg--- [|[ 吕 | 区 | 
文件 下) 编辑 EE) 查看 WV) 插入 CI) 修改 如 文本 CI) 命令 (CC) 站 点 G) 窗口 他 ) 帮助 0 


insertmsg. asp 


| le [Ea [a wt EH 本 Ee © 


图 15-3 留言 簿 网 页 页 面 
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表 15-1 表单 元 素 的 属性 与 说 明 


元 素 类 型 属 性 什 说 明 
表单 名 字 : frmlInsertMessage 本 表单 
名 字 : txtMessage 
文本 域 ee 三 接受 留言 输入 的 字 串 
行 数 : 5 
名 字 : hidUserNo 
隐藏 域 类 型 省 全 存放 当前 用 户 的 用 户 号 的 字 串 


值 : 二 % 一 (rstUserNo. Fields. Item 
("UserNo"). Value) % 二 


名 字 : hidDatetime 
隐藏 域 类 型 : 单行 存放 留言 日 期 时 间 的 字 串 
值 : 二 %== Now() % 二 


名 字 : btnSubmit 


按钮 标签 : 保存 留言 提交 留言 信息 的 按钮 
动作 : 提交 表单 
名 字 : btnClear 

按钮 标签 : 清除 重 写 把 表单 内 容 清除 到 未 填 状 态 的 按钮 
动作 : 重 置 表单 


(4) 利用 服务 器 行为 工具 实现 留言 动作 。 

2) 实现 留言 查看 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 

(2) 创建 rstMessage 记录 和 集 , 用 于 显示 所 有 留言 ,包含 用 户 名 、 留 言 时 间 、 留 言 内 容 
等 字段 。 注 意 留言 的 排序 方式 。 

(3) 在 新 页 面 中 ,创建 如 图 15-4 布局 的 重复 区 域 , 用 于 返回 所 有 留言 ,要 求 一 页 返回 


{rstMessage. Username} 在 {rstMessage. Datetime} 提 到 : 


3 “{rstMessage. Message} ” 。 | 


有 = 一 一 一 一 


图 15-4 显示 留言 信息 网 页 页 面 
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4 条 的 留言 。 创 建 如 图 15-4 所 示 的 导航 条 ,使 各 个 链接 根据 记录 集 当 前 页 的 位 置 确定 是 
否 显示 ,并 且 整 个 导航 条 在 返回 记录 为 空 时 ,不 应 显示 。 把 这 个 页 面 保存 到 CourseSys 子 
目录 下 , 取 名 为 messagelist. asp。 


5. 实验 的 参考 步骤 


1) 制作 留言 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 

操作 步骤 略 。 

(2) 创建 rstUserNo 记录 和 集 , 包 含 当 前 用 户 的 账户 信息 。 想 办 法 获得 当前 登录 用 户 
的 用 户 号 。 

创建 如 图 15-5 所 示 的 记录 集 , 可 以 用 测试 按钮 来 测试 。 


lrstUserHo 
:|CourseSys 图 | [定义 ...] 
ISELECT * 


|FORM dbo. Account 
WHERE LTRIM (RTRIN (Username))=LTRIN (RTRIN C MMColpar am’ )) 


运行 时 值 


Session CI_Username ) 


田 研 视图 
堆 ”预存 过 程 


图 15-5 【记录 集 3 对 话 框 


(3) 在 新 页 面 中 ,加 入 如 题 意 的 基本 元 素 ;添加 一 个 如 题 意 的 表单 。 把 这 个 页 面 保 存 
到 CourseSys 子 目 录 下 , 取 和 名 为 insertmsg. asp。 

完成 本 题 的 操作 步骤 如 下 。 

@ 按照 题 意 添加 元 素 和 表单 ,具体 步骤 略 。 

标题 和 其 他 静态 部 分 可 以 根据 自己 的 喜好 来 设计 .使 页 面 美观 ,可 以 自由 发 挥 ;表单 
部 分 是 必须 有 的 ,将 用 它 来 生成 动态 行为 ;对 各 个 表单 元 素 , 采 用 的 匈牙利 命名 法 。 

@ 选择 主 菜单 中 的 〖 文 件 3IK 保 存 3 命 令 ,把 这 个 页 面 保存 到 CourseSys 子 目 录 下 , 取 
名 为 insertmsg. asp。 

(4) 利用 服务 器 行为 工具 实现 留言 动作 。 完 成 本 题 的 操作 步骤 如 下 。 

Q@ 如 图 15-6 所 示 创 建 【插入 记录 3 的 服务 器 行为 。 

@ 保存 网 页 页 面 。 
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:| coursesys 器 
国 


: | dbo. Messageboard 


1 [insertsuccess. asp 


:|frmInsertlessage 闻 | 人寿 提 交 时 ) 


txtilessage 括 人 到 ] 列 中 “message” (文本 ) 
hiausezNo 拉 入 到 | 列 中 "UsezNa Le 3 dL 


图 15-6 【插入 记录 对 话 框 


主页 面 功 能 菜单 中 加 入 “我 要 留言 "的 按钮 并 设置 链接 ,如 图 15-7 所 示 。 


ee EL ER 


浆 迎 这 六 坟 轩 网 这 课 和 统 


图 15-7 加 入 留言 功能 的 主 功能 页 面 


实验 效果 : 

图 15-8 所 示 的 是 使 用 留言 敌 的 一 个 例子 。 

输入 留言 信息 , 单 击 【 保 存留 言 ] 按 钮 后 ,会 出 现 如 图 15-9 所 示 的 页 面 。 

注意 : 

这 个 实验 中 的 留言 日 期 时 间 不 是 很 精确 。 因 为 hidDatetime 是 在 服务 器 返回 这 个 动 
态 页 面 给 用 户 端 浏 览 器 的 时 候 计 算 的 ,而 不 是 在 用 户 提 交 保 存留 言 时 计算 的 当前 时 间 , 但 
是 用 户 不 会 在 看 到 页 面 时 马上 提交 留言 ,因此 这 个 时 间 不 是 精确 的 保存 留言 的 时 间 。 为 
了 得 到 精确 的 时 间 , 应 该 在 用 户 确定 保存 留言 , 单 击 了 〖 保 存留 言 3 按 钮 的 时 候 , 计 算 当 前 
时 间 。 这 就 必须 要 修改 【插入 记录 了 服务 器 行为 的 代码 ,请 读者 自己 思考 完成 。 

2) 实现 留言 查看 功能 

(1) 新 建 一 个 ASP VBScript 技术 的 动态 页 面 。 
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欢迎 进入 未 图 同 六 社 系 绞 


留言 德 


黄金 十 年 ， 你 抓 位 了 没有 ? 


图 15-8 在 留言 簿 中 输入 信息 


可 无 标题 文档 Microsoft Internet Explorer 
文件 EE 妨 覃 @) 查看 WD 收藏 入 ) 工具 I) 帮助 oD 
@RA- 日 - 国 国 从 |P 去 kgK 人 | 全 -名 国志 


恭喜 您 ! 
您 的 输入 已 经 保存 ! 


图 15-9 留言 信息 保存 提示 


操作 步骤 略 。 

(2) 创建 rstMessage 记录 和 集 , 用 于 显示 所 有 留言 .包含 用 户 名 、 留 言 时 间 、 留 言 内 容 
等 字段 。 注 意 留 言 的 排序 方式 。 

创建 如 图 15-10 所 示 的 rstMessage 记录 集 。 完 整 的 SELECT 语句 如 下 : 


SELECT Username., Datetime., Message 


FROM dbo. Account, dbo.Messageboard 
WHERE LTRIM(RTRIM( dbo. Account. UserNo)) = LTRIM(RTRIM( dbo. Messageboard. UserNo)) 


ORDER BY Datetime 


(3) 在 新 页 面 中 ,加 入 如 题 意 的 重复 区 域 . 用 于 返回 所 有 留言 .要 求 一 页 返回 4 条 的 
留言 。 创 建 如 图 15-4 所 示 的 导航 条 ,使 各 个 链接 根据 记录 集 当 前 页 的 位 置 确定 是 否 显 
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名 称 ; Exwexxse。 | 
[coursesys 国 | [定义 .….] 


SELECT Username, Datetine, Nessage 
|FRON dbo. Account, dbo. Messageboard 

(ETRIN (dbo. Account. UserNo]) = 
LTRIN (RTRIN (dbo. Nessageboard. UserHo)) 
ORDER BY Datetime 


:4 
名 称 


昌国 dbo Wessageboard 国 | 添加 到 sqL: 


UserlHo 


团 message 
田 - 国 ”dbo. Selection 
田 - 国 ”dbo. Student 
dbo Teacher 


图 15-10 【记录 集 3 对 话 框 


示 ,并 且 整 个 导航 条 在 返回 记录 为 空 时 ,不 应 显示 。 把 这 个 页 面 保存 到 CourseSys 子 目录 
中 , 取 名 为 messagelist. asp。 

完成 本 题 的 操作 步骤 如 下 。 

Q@ 按照 题 意 添加 基本 页 面 元 素 ,操作 步骤 略 。 

@ 添加 如 图 15-11 所 示 的 【重复 区 域 3 服 务 器 行为 。 


记录 集 : [=stnessage 
显示 ; @ 同一 ] 记录 
@ 〇 所 有 记录 


图 15-11 添加 【重复 区 域 3 服 务 器 行为 


@ 添加 如 图 15-12 一 图 15-15 所 示 的 分 页 服务 器 行为 。 


: [rstMessage 


图 15-12 添加 分 页 服务 器 行为 1 


国 [ 包 建新 链接 : “前 一 页 


:|rstMessage 


图 15-13 添加 分 页 服务 器 行为 2 
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:| rstmlessage 


图 15-15 添加 分 页 服务 器 行为 4 


@ 加 入 显示 条 件 : 

。 选择 【前 一 页 了 导航 链接 ,添加 【如 果 不 是 第 一 条 记录 则 显示 区 域 3 服 务 器 行为 ; 

。 选择 【后 一 页 了 导航 链接 ,添加 [如 果 不 是 最 后 一 条 记录 则 显示 区 域 3 服 务 器 行为 ; 

。 选择 整个 导航 条 ,添加 [如 果 记 录 集 不 为 空 则 显示 区 域 3 服 务 器 行为 。 

@) 选择 主 菜 单 中 的 【文件 了 医保 存 了 命令 ,把 这 个 页 面 保存 到 CourseSys 子 目 录 下 , 取 
名 为 messagelist. asp。 

@) 在 主 功能 页 面 中 加 入 到 此 页 面 的 链接 。 

实验 效果 : 

图 15-16 是 查看 留言 的 例子 。 


地 址 @ [ 柱 tb 1710_16_1. 2yCoursssysyms 


次 迎 过 六 孝 回 同 这 侍 系 绞 
所 有 留言 


yzhang 在 2003-6-7 14:39:28 提 到 : 

“学 校 里 每 一 分 钟 都 有 人 起 床 ， 每 一 分 钟 都 有 人 睡 。”-. 
edison 在 2003-6-7 16:43:05 提 到 : 

“请 不 要 胡乱 留言 ， 违 者 罚款 3 千 。”。 

yzhang 在 2007-10-5 19:44:25 彻 到 : 

“黄金 十 年 ， 你 抓 住 了 没有 ? ”。 

Yzhang 在 2007-10-5 19:47:30 提 到 : 

“未 得 早 ， 不 如 未 得 巧 。”。 


一 


图 15-16 留言 实验 例子 
6. 实验 后 的 思考 题 


请 读者 思考 BBS 的 设计 和 实现 。 
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i A 配套 光盘 的 使 用 说 明 


1. 光盘 内 容 


光盘 上 有 “教程 和 实验 的 插图 ”和 “实验 ”两 个 文件 夹 ,在 每 个 文件 夹 中 又 分 别 有 《 电 子 
商务 网 站 建设 教程 )( 简 称 “ 教 程 ”)( 第 2 版 ) 和 《电子 商务 网 站 建设 实验 指导 》( 第 2 版 )( 简 
称 “ 实 验 指 导 ”) 两 个 文件 夹 。“ 教 程 和 实验 的 插图 ”文件 夹 中 存放 的 是 教材 中 的 插图 ,“ 实 
例 和 实验 的 素材 ”文件 夹 中 存放 的 是 实例 和 练习 所 需要 的 素材 ,以 及 实例 和 练习 的 结果 ， 
其 中 各 文件 夹 介绍 如 下 。 

(1)“ 教 程 和 实验 的 插图 ”文件 夹 T“ 教 程 " 和 “实验 指导 ” 子 文件 夹 中 ch01、ch02、 
ch03… 子 文件 夹 分 别 存放 “教程 "和 “实验 指导 ”两 本 教材 各 章 的 插图 ; 

(2)“ 实 例 和 实验 的 素材 ”文件 夹 下 “教程 "和 “实验 指导 ” 子 文件 夹 中 ch01、ch02、 
ch03… 子 文件 夹 分 别 存放 “教程 "和 “实验 指导 ”各 章 的 实验 素材 和 实验 结果 ;每 个 chxx 文 
件 夹 中 的 material 文件 夹 存放 素材 ,result 文件 夹 存放 结果 。 

2. 运行 环境 

(1) 软件 环境 : 

Windows 2000/XP、Microsoft Office 2000 或 更 新 的 版 本 、Macromedia 的 
Dreamweaver 8、Fireworks 8、Flash 8 .Extension Manager。 

(2) 硬件 环境 : 

能 正常 运行 上 述 软件 的 硬件 系统 。 

3. 使 用 方法 


(1) 可 在 本 地 计算 机 的 硬盘 中 创建 文件 夹 My site, 并 将 其 设置 为 本 地 站 点 的 根 文件 夹 。 

(2) 将 光盘 每 一 章节 的 material 文件 夹 中 所 有 文件 和 文件 夹 一 起 复制 到 本 地 站 点 的 
根 目录 My site 中 ,然后 就 可 在 本 地 计算 机 中 使 用 盘 中 的 素材 完成 实例 与 练习 了 。 

(3) 本 “教程 "和 “实验 指导 ”中 用 到 的 图 形 图 像 文 件 若 没有 指明 路 径 , 该 图 形 图 像 文 
件 均 存 放 在 My site 下 的 img 文件 夹 中 。 

(4) 光盘 中 扩展 名 为 . swf 的 文件 ,是 Flash 动画 文件 ,需要 使 用 Flash 播放 器 播放 。 


4. 附加 说 明 


虽然 本 光盘 是 随 书 赠品 ,但 我 们 仍 尽 最 大 努力 保证 本 光盘 内 容 和 功能 的 正确 性 。 若 
仍 存在 令 人 不 满意 的 地 方 ,欢迎 您 向 我 们 提出 意见 和 建议 ,我 们 会 在 以 后 的 产品 中 加 以 注 
意 ,并 向 您 表示 感谢 。 
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读者 意见 反馈 


亲爱 的 读者 : 

感谢 您 一 直 以 来 对 清华 版 计算 机 教材 的 支持 和 爱护 。 为 了 今后 为 您 提供 更 优秀 的 
教材 ， 请 您 抽出 宝贵 的 时 间 来 填写 下 面 的 意见 反馈 表 ， 以 便 我 们 更 好 地 对 本 教材 做 进 
一 步 改进 。 同 时 如 果 您 在 使 用 本 教材 的 过 程 中 遇 到 了 什么 问题 , 或 者 有 什么 好 的 建议 ， 


也 请 您 来 信 告诉 我 们 。 
地 址 : 北京 市 海淀 区 双 清 路 学 研 大 厦 A 座 602 计算 机 与 信息 分 社 营销 室 收 
邮编 : 100084 电子 邮件 : jsijc@tup.tsinghua.edu.cn 


电话 : 010-62770175-4608/4409 邮购 电话 : 010-62786544 
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电子 教案 支持 


敬爱 的 教师 : 

为 了 配合 本 课程 的 教学 需要 ， 本 教材 配 有 配套 的 电子 教案 (素材 )， 有 需求 的 教师 可 
以 与 我 们 联系 , 我 们 将 向 使 用 本 教材 进行 教学 的 教师 免费 赠送 电子 教案 (素材 ), 希望 有 
助 于 教学 活动 的 开展 。 相 关 信 息 请 拨打 电话 010-62776969 或 发 送 电 子 邮件 至 
jsjjc@tup.tsinghua.edu.cn 咨询 ， 也 可 以 到 清华 大 学 出 版 社 主页 (http://www.tup.com.cn 或 
http://www.tup.tsinghua.edu.cn) 上 查询 。 


